react-msaview 5.8.0 → 5.10.0

package/src/constants.ts

@@ -6,6 +6,7 @@ export const defaultScrollX = 0
 export const defaultScrollY = 0
 export const defaultCurrentAlignment = 0
 export const defaultShowDomains = false
+export const defaultShowDomainLegend = true
 export const defaultHideGaps = true
 export const defaultAllowedGappyness = 100
 export const defaultSubFeatureRows = false

package/src/model.ts

@@ -31,6 +31,7 @@ import {
   defaultScrollX,
   defaultScrollY,
   defaultScrollZoom,
+  defaultShowDomainLegend,
   defaultShowDomains,
   defaultSubFeatureRows,
   maxCellSize,
@@ -132,6 +133,15 @@ function stateModelFactory() {
          * #property
          */
         showDomains: stripDefault(types.boolean, defaultShowDomains),
+        /**
+         * #property
+         * whether the domain legend is expanded. The legend floats over the
+         * top-right of the alignment, so on a tall panel it covers real
+         * residues -- persisting the state is what lets a reader collapse it
+         * and keep it collapsed, and what lets a session or a figure open with
+         * it already out of the way.
+         */
+        showDomainLegend: stripDefault(types.boolean, defaultShowDomainLegend),
         /**
          * #property
          */
@@ -475,6 +485,13 @@ function stateModelFactory() {
       setShowDomains(arg: boolean) {
         self.showDomains = arg
       },
+      /**
+       * #action
+       * expand or collapse the domain legend that floats over the alignment
+       */
+      setShowDomainLegend(arg: boolean) {
+        self.showDomainLegend = arg
+      },
       /**
        * #action
        */
@@ -1618,8 +1635,8 @@ function stateModelFactory() {
           return 0
         }
         const col = self.seqPosGlobalColIndex.get(rowName)?.[seqPos]
-        // past the end of the ungapped sequence: 0 for the degenerate empty-row
-        // case, otherwise one past the last column, as the scan version returned
+        // past the end of the ungapped sequence: 0 for the degenerate all-gap
+        // row, otherwise one past the last column
         return col ?? (seqPos === 0 ? 0 : seq.length)
       },
 
@@ -2067,79 +2084,100 @@ function stateModelFactory() {
           })
         }
 
-        // autorun opens treeFilehandle. generation guard: if the filehandle
-        // changes mid-fetch, a slower earlier request must not clobber the data
-        // (or loading flag) set by the newer one
-        let treeGeneration = 0
-        addDisposer(
-          self,
-          autorun(async () => {
-            const { treeFilehandle } = self
-            if (treeFilehandle) {
-              const generation = ++treeGeneration
+        /**
+         * Fetch a filehandle whenever it changes, and hand the text to
+         * `onLoad`.
+         *
+         * Every loader carries a generation guard: the filehandle can change
+         * mid-fetch (a second file picked while the first is still in flight),
+         * and the slower earlier request must not clobber the data, status, or
+         * loading flag belonging to the newer one.
+         *
+         * `clearFilehandle` serves two purposes for the loaders that pass it.
+         * A local file has no URL to refetch from, so the handle is dropped
+         * once its bytes are in the model; and a fetch the user cancels drops
+         * it too, returning the view to the import form rather than leaving a
+         * stuck spinner.
+         */
+        const loadOnFilehandleChange = ({
+          getFilehandle,
+          onLoad,
+          setLoading,
+          clearFilehandle,
+        }: {
+          getFilehandle: () => FileLocationType | undefined
+          onLoad: (text: string) => void
+          setLoading?: (arg: boolean) => void
+          clearFilehandle?: () => void
+        }) => {
+          let generation = 0
+          addDisposer(
+            self,
+            autorun(async () => {
+              const filehandle = getFilehandle()
+              if (!filehandle) {
+                return
+              }
+              const current = ++generation
+              const isCurrent = () => current === generation
               try {
-                self.setLoadingTree(true)
+                setLoading?.(true)
+                self.setError(undefined)
                 const text = await fetchTextWithProgress(
-                  openLocation(treeFilehandle),
+                  openLocation(filehandle),
                   status => {
-                    if (generation === treeGeneration) {
+                    if (isCurrent()) {
                       self.setStatus(status)
                     }
                   },
                 )
-                if (generation === treeGeneration) {
+                if (isCurrent()) {
                   transaction(() => {
-                    self.setTree(text)
-                    if (treeFilehandle.locationType === 'BlobLocation') {
-                      // clear filehandle after loading if from a local file
-                      self.setTreeFilehandle(undefined)
+                    onLoad(text)
+                    if (filehandle.locationType === 'BlobLocation') {
+                      clearFilehandle?.()
                     }
                   })
                 }
               } catch (e) {
-                if (generation === treeGeneration) {
+                if (isCurrent()) {
                   if (isAbortError(e)) {
-                    // cancelled by the user: drop the filehandle so the view
-                    // returns to the import form instead of a stuck spinner
-                    self.setTreeFilehandle(undefined)
+                    clearFilehandle?.()
                   } else {
                     console.error(e)
                     self.setError(e)
                   }
                 }
               } finally {
-                if (generation === treeGeneration) {
-                  self.setLoadingTree(false)
-                }
-              }
-            }
-          }),
-        )
-        // autorun opens treeMetadataFilehandle
-        addDisposer(
-          self,
-          autorun(async () => {
-            const { treeMetadataFilehandle } = self
-            if (treeMetadataFilehandle) {
-              try {
-                self.setTreeMetadata(
-                  await fetchTextWithProgress(
-                    openLocation(treeMetadataFilehandle),
-                    status => {
-                      self.setStatus(status)
-                    },
-                  ),
-                )
-              } catch (e) {
-                // ignore user cancel (isAbortError); treeMetadata is optional
-                if (!isAbortError(e)) {
-                  console.error(e)
-                  self.setError(e)
+                if (isCurrent()) {
+                  setLoading?.(false)
                 }
               }
-            }
-          }),
-        )
+            }),
+          )
+        }
+
+        loadOnFilehandleChange({
+          getFilehandle: () => self.treeFilehandle,
+          onLoad: text => {
+            self.setTree(text)
+          },
+          setLoading: arg => {
+            self.setLoadingTree(arg)
+          },
+          clearFilehandle: () => {
+            self.setTreeFilehandle(undefined)
+          },
+        })
+
+        // treeMetadata is decorative and has no import-form step of its own, so
+        // it keeps no loading flag and nothing to return to on cancel
+        loadOnFilehandleChange({
+          getFilehandle: () => self.treeMetadataFilehandle,
+          onLoad: text => {
+            self.setTreeMetadata(text)
+          },
+        })
 
         // autorun parses inline gff text from data.gff
         addDisposer(
@@ -2157,83 +2195,29 @@ function stateModelFactory() {
           }),
         )
 
-        // autorun opens gffFilehandle for InterProScan domains
-        addDisposer(
-          self,
-          autorun(async () => {
-            const { gffFilehandle } = self
-            if (gffFilehandle) {
-              try {
-                const gffText = await fetchTextWithProgress(
-                  openLocation(gffFilehandle),
-                  status => {
-                    self.setStatus(status)
-                  },
-                )
-                self.applyGFFText(gffText)
-                if (gffFilehandle.locationType === 'BlobLocation') {
-                  self.setGFFFilehandle(undefined)
-                }
-              } catch (e) {
-                // on user cancel (isAbortError) drop the filehandle
-                if (isAbortError(e)) {
-                  self.setGFFFilehandle(undefined)
-                } else {
-                  console.error(e)
-                  self.setError(e)
-                }
-              }
-            }
-          }),
-        )
+        // gffFilehandle carries InterProScan domains
+        loadOnFilehandleChange({
+          getFilehandle: () => self.gffFilehandle,
+          onLoad: text => {
+            self.applyGFFText(text)
+          },
+          clearFilehandle: () => {
+            self.setGFFFilehandle(undefined)
+          },
+        })
 
-        // autorun opens msaFilehandle. generation guard: see treeFilehandle
-        let msaGeneration = 0
-        addDisposer(
-          self,
-          autorun(async () => {
-            const { msaFilehandle } = self
-            if (msaFilehandle) {
-              const generation = ++msaGeneration
-              try {
-                self.setLoadingMSA(true)
-                self.setError(undefined)
-                const txt = await fetchTextWithProgress(
-                  openLocation(msaFilehandle),
-                  status => {
-                    if (generation === msaGeneration) {
-                      self.setStatus(status)
-                    }
-                  },
-                )
-                if (generation === msaGeneration) {
-                  transaction(() => {
-                    self.setMSA(txt)
-                    if (msaFilehandle.locationType === 'BlobLocation') {
-                      // clear filehandle after loading if from a local file
-                      self.setMSAFilehandle(undefined)
-                    }
-                  })
-                }
-              } catch (e) {
-                if (generation === msaGeneration) {
-                  if (isAbortError(e)) {
-                    // cancelled by the user: drop the filehandle so the view
-                    // returns to the import form instead of a stuck spinner
-                    self.setMSAFilehandle(undefined)
-                  } else {
-                    console.error(e)
-                    self.setError(e)
-                  }
-                }
-              } finally {
-                if (generation === msaGeneration) {
-                  self.setLoadingMSA(false)
-                }
-              }
-            }
-          }),
-        )
+        loadOnFilehandleChange({
+          getFilehandle: () => self.msaFilehandle,
+          onLoad: text => {
+            self.setMSA(text)
+          },
+          setLoading: arg => {
+            self.setLoadingMSA(arg)
+          },
+          clearFilehandle: () => {
+            self.setMSAFilehandle(undefined)
+          },
+        })
 
         // Keep the parse chain warm: reading self.columns transitively holds
         // self.MSA (parseMSA) computed alive, so it is parsed once per data

package/src/modelFilehandleLoaders.test.ts

@@ -0,0 +1,137 @@
+// The reactive filehandle loaders in afterCreate: each fetches when its
+// filehandle changes, and each guards against a stale response, since a user can
+// pick a second file while the first is still downloading.
+import { beforeEach, expect, test, vi } from 'vitest'
+
+import MSAModelF from './model.ts'
+
+import type * as FetchUtils from './fetchUtils.ts'
+
+// uri -> settle functions for the fetch that autorun kicked off
+const inFlight = new Map<
+  string,
+  { resolve: (text: string) => void; reject: (e: unknown) => void }
+>()
+
+vi.mock('@jbrowse/core/util/io', () => ({
+  openLocation: (loc: { uri: string }) => loc,
+}))
+
+vi.mock('./fetchUtils.ts', async importOriginal => ({
+  ...(await importOriginal<typeof FetchUtils>()),
+  fetchTextWithProgress: (loc: { uri: string }) =>
+    new Promise<string>((resolve, reject) => {
+      inFlight.set(loc.uri, { resolve, reject })
+    }),
+}))
+
+function uri(u: string) {
+  return { locationType: 'UriLocation' as const, uri: u }
+}
+
+function fasta(seq: string) {
+  return `>seq1\n${seq}`
+}
+
+// let the awaited fetch and the actions that follow it run
+function flush() {
+  return new Promise(resolve => setTimeout(resolve, 0))
+}
+
+function makeModel() {
+  const model = MSAModelF().create({ type: 'MsaView' })
+  model.setWidth(800)
+  return model
+}
+
+beforeEach(() => {
+  inFlight.clear()
+})
+
+test('an msa filehandle loads into the model and clears its loading flag', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('aln.fa'))
+  expect(model.loadingMSA).toBe(true)
+
+  inFlight.get('aln.fa')!.resolve(fasta('ACDE'))
+  await flush()
+
+  expect(model.data.msa).toBe(fasta('ACDE'))
+  expect(model.loadingMSA).toBe(false)
+})
+
+test('a slower earlier fetch never clobbers a newer one', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('first.fa'))
+  model.setMSAFilehandle(uri('second.fa'))
+
+  // the newer fetch finishes first, then the abandoned one comes back
+  inFlight.get('second.fa')!.resolve(fasta('SECOND'))
+  await flush()
+  inFlight.get('first.fa')!.resolve(fasta('FIRST'))
+  await flush()
+
+  expect(model.data.msa).toBe(fasta('SECOND'))
+  expect(model.loadingMSA).toBe(false)
+})
+
+test('a stale failure does not raise an error over live data', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('first.fa'))
+  model.setMSAFilehandle(uri('second.fa'))
+
+  inFlight.get('second.fa')!.resolve(fasta('SECOND'))
+  await flush()
+  inFlight.get('first.fa')!.reject(new Error('too slow'))
+  await flush()
+
+  expect(model.error).toBeUndefined()
+  expect(model.data.msa).toBe(fasta('SECOND'))
+})
+
+test('cancelling drops the filehandle so the view returns to the import form', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('aln.fa'))
+
+  inFlight.get('aln.fa')!.reject(new DOMException('Aborted', 'AbortError'))
+  await flush()
+
+  expect(model.msaFilehandle).toBeUndefined()
+  expect(model.error).toBeUndefined()
+  expect(model.loadingMSA).toBe(false)
+})
+
+test('a failed fetch surfaces as an error', async () => {
+  const model = makeModel()
+  model.setMSAFilehandle(uri('aln.fa'))
+
+  inFlight.get('aln.fa')!.reject(new Error('404'))
+  await flush()
+
+  expect(model.error).toBeInstanceOf(Error)
+  expect(model.loadingMSA).toBe(false)
+})
+
+test('tree, treeMetadata and gff filehandles each load into their own field', async () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    treeFilehandle: uri('tree.nh'),
+    treeMetadataFilehandle: uri('meta.json'),
+    gffFilehandle: uri('domains.gff'),
+  })
+  model.setWidth(800)
+
+  inFlight.get('tree.nh')!.resolve('(a,b);')
+  inFlight.get('meta.json')!.resolve('{"a":{"genome":"human"}}')
+  inFlight
+    .get('domains.gff')!
+    .resolve(
+      '##gff-version 3\na\tPfam\tprotein_match\t1\t2\t.\t.\t.\tName=PF00069',
+    )
+  await flush()
+
+  expect(model.data.tree).toBe('(a,b);')
+  expect(model.treeMetadata.a?.genome).toBe('human')
+  expect(model.actuallyShowDomains).toBe(true)
+  expect(model.loadingTree).toBe(false)
+})

package/src/neighborJoining.test.ts

@@ -149,4 +149,16 @@ describe('calculateNeighborJoiningTree', () => {
     expect(tree).toContain('similar2')
     expect(tree).toContain('different')
   })
+
+  test('handles ragged rows, treating a short row as gapped past its end', () => {
+    const rows: [string, string][] = [
+      ['full', 'MKAAYLSMFGKED'],
+      ['short', 'MKAAYL'],
+      ['other', 'WWWWWWWWWWWWW'],
+    ]
+    const tree = calculateNeighborJoiningTree(rows)
+
+    expect(tree).toMatch(/;$/)
+    expect(tree).toContain('short')
+  })
 })

package/src/neighborJoining.ts

@@ -53,18 +53,18 @@ function isGap(c: string) {
 }
 
 function computePairwiseDistance(seq1: string, seq2: string) {
-  if (seq1.length !== seq2.length) {
-    throw new Error('Sequences must have the same length (aligned)')
-  }
-
-  let matches = 0
-  let mismatches = 0
+  // ragged input is real -- a3m and hand-edited fasta both produce rows shorter
+  // than the alignment -- so a row that stops early counts as gapped for the
+  // remainder, the same rule the model's `blanks` getter applies. Requiring
+  // equal lengths here instead made "build tree from MSA" throw on those files.
+  const len = Math.max(seq1.length, seq2.length)
+  let compared = 0
   let totalScore = 0
   let maxPossibleScore = 0
 
-  for (let i = 0; i < seq1.length; i++) {
-    const a = seq1[i]!
-    const b = seq2[i]!
+  for (let i = 0; i < len; i++) {
+    const a = seq1[i] ?? '-'
+    const b = seq2[i] ?? '-'
 
     const aGap = isGap(a)
     const bGap = isGap(b)
@@ -72,24 +72,16 @@ function computePairwiseDistance(seq1: string, seq2: string) {
       continue
     }
 
+    compared++
     if (aGap || bGap) {
-      mismatches++
       continue
     }
 
-    const score = getBlosum62Score(a, b)
-    totalScore += score
+    totalScore += getBlosum62Score(a, b)
     maxPossibleScore += Math.max(getBlosum62Score(a, a), getBlosum62Score(b, b))
-
-    if (a.toUpperCase() === b.toUpperCase()) {
-      matches++
-    } else {
-      mismatches++
-    }
   }
 
-  const total = matches + mismatches
-  if (total === 0) {
+  if (compared === 0) {
     return 1
   }
 

package/src/parseAsn1.ts

@@ -32,28 +32,38 @@ const remap: Record<string, string> = {
   'leaf-count': 'leafCount',
 }
 
+// index just past the '}' closing the '{' at openIdx, or -1 when it never
+// closes. Braces nest (a node holds features, which hold values), so finding the
+// end of a block means counting depth rather than taking the next '}'.
+function afterMatchingBrace(str: string, openIdx: number) {
+  let depth = 1
+  let pos = openIdx + 1
+  while (pos < str.length && depth > 0) {
+    if (str[pos] === '{') {
+      depth++
+    } else if (str[pos] === '}') {
+      depth--
+    }
+    pos++
+  }
+  return depth === 0 ? pos : -1
+}
+
+// the contents of each top-level {...} block in str, siblings only
 function extractBracedBlocks(str: string): string[] {
   const blocks: string[] = []
   let pos = 0
   while (pos < str.length) {
-    pos = str.indexOf('{', pos)
-    if (pos === -1) {
+    const openIdx = str.indexOf('{', pos)
+    if (openIdx === -1) {
       break
     }
-    let depth = 1
-    const start = pos + 1
-    pos++
-    while (pos < str.length && depth > 0) {
-      if (str[pos] === '{') {
-        depth++
-      } else if (str[pos] === '}') {
-        depth--
-      }
-      pos++
-    }
-    if (depth === 0) {
-      blocks.push(str.slice(start, pos - 1).trim())
+    const end = afterMatchingBrace(str, openIdx)
+    if (end === -1) {
+      break
     }
+    blocks.push(str.slice(openIdx + 1, end - 1).trim())
+    pos = end
   }
   return blocks
 }
@@ -63,17 +73,8 @@ function findBracedContent(str: string, after: number) {
   if (openIdx === -1) {
     return undefined
   }
-  let depth = 1
-  let pos = openIdx + 1
-  while (pos < str.length && depth > 0) {
-    if (str[pos] === '{') {
-      depth++
-    } else if (str[pos] === '}') {
-      depth--
-    }
-    pos++
-  }
-  return depth === 0 ? str.slice(openIdx + 1, pos - 1).trim() : undefined
+  const end = afterMatchingBrace(str, openIdx)
+  return end === -1 ? undefined : str.slice(openIdx + 1, end - 1).trim()
 }
 
 export function parseAsn1(
@@ -163,22 +164,13 @@ function extractSections(asnString: string): Record<string, string> {
       continue
     }
 
-    let depth = 1
-    const start = pos + 1
-    pos++
-    while (pos < content.length && depth > 0) {
-      if (content[pos] === '{') {
-        depth++
-      } else if (content[pos] === '}') {
-        depth--
-      }
-      pos++
-    }
-    if (depth === 0) {
-      sections[name] = content.slice(start, pos - 1).trim()
+    const end = afterMatchingBrace(content, pos)
+    if (end === -1) {
+      break
     }
+    sections[name] = content.slice(pos + 1, end - 1).trim()
 
-    pos = content.indexOf(',', pos)
+    pos = content.indexOf(',', end)
     pos = pos === -1 ? content.length : pos + 1
   }