react-msaview 4.4.0 → 4.4.2

package/src/model.ts

@@ -1,4 +1,12 @@
-import { groupBy, notEmpty, sum } from '@jbrowse/core/util'
+import {
+  clamp,
+  fetchAndMaybeUnzipText,
+  groupBy,
+  localStorageGetBoolean,
+  localStorageSetBoolean,
+  notEmpty,
+  sum,
+} from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
 import { colord } from 'colord'
@@ -8,7 +16,6 @@ import { parseEmfTree } from 'emf-js'
 import { saveAs } from 'file-saver'
 import { autorun, transaction } from 'mobx'
 import { addDisposer, cast, types } from 'mobx-state-tree'
-import { ungzip } from 'pako'
 import Stockholm from 'stockholm-js'
 
 import { blocksX, blocksY } from './calculateBlocks'
@@ -29,17 +36,15 @@ import FastaMSA from './parsers/FastaMSA'
 import StockholmMSA from './parsers/StockholmMSA'
 import { reparseTree } from './reparseTree'
 import {
-  globalCoordToRowSpecificCoord,
+  mouseOverCoordToGapRemovedRowCoord,
   mouseOverCoordToGlobalCoord,
 } from './rowCoordinateCalculations'
+import { seqCoordToRowSpecificGlobalCoord } from './seqCoordToRowSpecificGlobalCoord'
 import {
-  clamp,
   collapse,
   generateNodeIds,
-  isGzip,
+  isBlank,
   len,
-  localStorageGetBoolean,
-  localStorageSetBoolean,
   maxLength,
   setBrLength,
   skipBlanks,
@@ -627,24 +632,23 @@ function stateModelFactory() {
        */
       get tree(): NodeWithIds {
         const text = self.data.tree
-        return text
-          ? reparseTree(
-              generateNodeIds(
+
+        return reparseTree(
+          text
+            ? generateNodeIds(
                 text.startsWith('BioTreeContainer')
                   ? flatToTree(parseAsn1(text))
                   : parseNewick(
                       text.startsWith('SEQ') ? parseEmfTree(text).tree : text,
                     ),
-              ),
-            )
-          : reparseTree(
-              this.MSA?.getTree() || {
+              )
+            : this.MSA?.getTree() || {
                 noTree: true,
                 children: [],
                 id: 'empty',
                 name: 'empty',
               },
-            )
+        )
       },
 
       /**
@@ -711,16 +715,18 @@ function stateModelFactory() {
         if (hideGaps) {
           const strs = this.leaves
             .map(leaf => this.MSA?.getRow(leaf.data.name))
-            .filter((item): item is string => !!item)
+            .filter(notEmpty)
           if (strs.length) {
-            for (let i = 0; i < strs[0]!.length; i++) {
+            const s0len = strs[0]!.length
+            for (let i = 0; i < s0len; i++) {
               let counter = 0
-              for (const str of strs) {
-                if (str[i] === '-') {
+              const l = strs.length
+              for (let j = 0; j < l; j++) {
+                if (isBlank(strs[j]![i])) {
                   counter++
                 }
               }
-              if (counter / strs.length >= realAllowedGappyness / 100) {
+              if (counter / l >= realAllowedGappyness / 100) {
                 blanks.push(i)
               }
             }
@@ -805,11 +811,7 @@ function stateModelFactory() {
        * #getter
        */
       get colStatsSums() {
-        return Object.fromEntries(
-          Object.entries(this.colStats).map(([key, val]) => {
-            return [key, sum(Object.values(val))]
-          }),
-        )
+        return this.colStats.map(val => sum(Object.values(val)))
       },
       /**
        * #getter
@@ -948,14 +950,14 @@ function stateModelFactory() {
        */
       zoomOutHorizontal() {
         self.colWidth = Math.max(1, Math.floor(self.colWidth * 0.75))
-        self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
+        self.scrollX = clamp(self.scrollX, self.maxScrollX, 0)
       },
       /**
        * #action
        */
       zoomInHorizontal() {
         self.colWidth = Math.ceil(self.colWidth * 1.5)
-        self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
+        self.scrollX = clamp(self.scrollX, self.maxScrollX, 0)
       },
       /**
        * #action
@@ -976,7 +978,7 @@ function stateModelFactory() {
         transaction(() => {
           self.colWidth = Math.ceil(self.colWidth * 1.5)
           self.rowHeight = Math.ceil(self.rowHeight * 1.5)
-          self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
+          self.scrollX = clamp(self.scrollX, self.maxScrollX, 0)
         })
       },
       /**
@@ -986,7 +988,7 @@ function stateModelFactory() {
         transaction(() => {
           self.colWidth = Math.max(1, Math.floor(self.colWidth * 0.75))
           self.rowHeight = Math.max(1.5, Math.floor(self.rowHeight * 0.75))
-          self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
+          self.scrollX = clamp(self.scrollX, self.maxScrollX, 0)
         })
       },
       /**
@@ -1000,21 +1002,21 @@ function stateModelFactory() {
        * #action
        */
       doScrollY(deltaY: number) {
-        self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0)
+        self.scrollY = clamp(self.scrollY + deltaY, -self.totalHeight + 10, 0)
       },
 
       /**
        * #action
        */
       doScrollX(deltaX: number) {
-        self.scrollX = clamp(self.maxScrollX, self.scrollX + deltaX, 0)
+        self.scrollX = clamp(self.scrollX + deltaX, self.maxScrollX, 0)
       },
 
       /**
        * #action
        */
       setScrollX(n: number) {
-        self.scrollX = clamp(self.maxScrollX, n, 0)
+        self.scrollX = clamp(n, self.maxScrollX, 0)
       },
 
       /**
@@ -1137,11 +1139,9 @@ function stateModelFactory() {
        * #method
        * return a row-specific letter, or undefined if gap
        */
-      mouseOverCoordToRowLetter(rowName: string, position: number) {
+      mouseOverCoordToRowLetter(rowName: string, pos: number) {
         const { rowMap, blanks } = self
-        return rowMap.get(rowName)?.[
-          mouseOverCoordToGlobalCoord(blanks, position)
-        ]
+        return rowMap.get(rowName)?.[mouseOverCoordToGlobalCoord(blanks, pos)]
       },
 
       /**
@@ -1150,15 +1150,25 @@ function stateModelFactory() {
        * global coordinate
        */
       mouseOverCoordToGapRemovedRowCoord(rowName: string, position: number) {
-        const { rowMap, blanks } = self
-        const seq = rowMap.get(rowName)
-        if (seq !== undefined) {
-          const pos2 = mouseOverCoordToGlobalCoord(blanks, position)
-          const pos1 = globalCoordToRowSpecificCoord(seq, pos2)
-          return seq[pos1] === '-' || !seq[pos1] ? undefined : pos1
-        } else {
-          return undefined
-        }
+        return mouseOverCoordToGapRemovedRowCoord({
+          rowName,
+          position,
+          rowMap: self.rowMap,
+          blanks: self.blanks,
+        })
+      },
+
+      /**
+       * #method
+       * return a row-specific sequence coordinate, skipping gaps, given a
+       * global coordinate
+       */
+      mouseOverCoordToGapRemovedRowCoordOneBased(
+        rowName: string,
+        position: number,
+      ) {
+        const val = this.mouseOverCoordToGapRemovedRowCoord(rowName, position)
+        return val !== undefined ? val + 1 : undefined
       },
 
       /**
@@ -1169,21 +1179,12 @@ function stateModelFactory() {
       seqCoordToRowSpecificGlobalCoord(rowName: string, position: number) {
         const { rowNames, rows } = self
         const index = rowNames.indexOf(rowName)
-        if (index !== -1 && rows[index]) {
-          const row = rows[index][1]
-
-          let k = 0
-          let i = 0
-          for (; k < position; i++) {
-            if (row[i] !== '-') {
-              k++
-            } else if (k >= position) {
-              break
-            }
-          }
-          return i
-        }
-        return 0
+        return index !== -1 && rows[index]
+          ? seqCoordToRowSpecificGlobalCoord({
+              row: rows[index][1],
+              position,
+            })
+          : 0
       },
     }))
 
@@ -1321,7 +1322,11 @@ function stateModelFactory() {
        * #action
        */
       reset() {
-        self.setData({ tree: '', msa: '' })
+        self.setData({
+          tree: '',
+          msa: '',
+        })
+        self.resetZoom()
         self.setError(undefined)
         self.setScrollY(0)
         self.setScrollX(0)
@@ -1368,12 +1373,26 @@ function stateModelFactory() {
       /**
        * #action
        */
-      showEntire() {
+      fit() {
         self.rowHeight = self.msaAreaHeight / self.numRows
         self.colWidth = self.msaAreaWidth / self.numColumns
         self.scrollX = 0
         self.scrollY = 0
       },
+      /**
+       * #action
+       */
+      fitVertically() {
+        self.rowHeight = self.msaAreaHeight / self.numRows
+        self.scrollY = 0
+      },
+      /**
+       * #action
+       */
+      fitHorizontally() {
+        self.colWidth = self.msaAreaWidth / self.numColumns
+        self.scrollX = 0
+      },
 
       afterCreate() {
         addDisposer(
@@ -1402,7 +1421,7 @@ function stateModelFactory() {
               try {
                 self.setLoadingTree(true)
                 self.setTree(
-                  await openLocation(treeFilehandle).readFile('utf8'),
+                  await fetchAndMaybeUnzipText(openLocation(treeFilehandle)),
                 )
                 if (treeFilehandle.locationType === 'BlobLocation') {
                   // clear filehandle after loading if from a local file
@@ -1425,7 +1444,9 @@ function stateModelFactory() {
             if (treeMetadataFilehandle) {
               try {
                 self.setTreeMetadata(
-                  await openLocation(treeMetadataFilehandle).readFile('utf8'),
+                  await fetchAndMaybeUnzipText(
+                    openLocation(treeMetadataFilehandle),
+                  ),
                 )
               } catch (e) {
                 console.error(e)
@@ -1443,9 +1464,10 @@ function stateModelFactory() {
             if (msaFilehandle) {
               try {
                 self.setLoadingMSA(true)
-                const res = await openLocation(msaFilehandle).readFile()
-                const buf = isGzip(res) ? ungzip(res) : res
-                const txt = new TextDecoder('utf8').decode(buf)
+                self.setError(undefined)
+                const txt = await fetchAndMaybeUnzipText(
+                  openLocation(msaFilehandle),
+                )
                 transaction(() => {
                   self.setMSA(txt)
                   if (msaFilehandle.locationType === 'BlobLocation') {

package/src/rowCoordinateCalculations.test.ts

@@ -1,7 +1,12 @@
 import { expect, test } from 'vitest'
 
-import { mouseOverCoordToGlobalCoord } from './rowCoordinateCalculations'
-test('blanks3', () => {
+import {
+  globalCoordToRowSpecificCoord,
+  mouseOverCoordToGapRemovedCoord,
+  mouseOverCoordToGlobalCoord,
+} from './rowCoordinateCalculations'
+
+test('with blanks at positions [2, 5, 8]', () => {
   const blanks = [2, 5, 8]
   ;(
     [
@@ -18,3 +23,134 @@ test('blanks3', () => {
     expect(mouseOverCoordToGlobalCoord(blanks, r[0])).toBe(r[1])
   })
 })
+
+test('with no blanks', () => {
+  const blanks: number[] = []
+  ;(
+    [
+      [0, 0],
+      [1, 1],
+      [5, 5],
+      [10, 10],
+    ] as const
+  ).forEach(r => {
+    expect(mouseOverCoordToGlobalCoord(blanks, r[0])).toBe(r[1])
+  })
+})
+
+test('with consecutive blanks', () => {
+  const blanks = [2, 3, 4, 7, 8]
+  ;(
+    [
+      [0, 0],
+      [1, 1],
+      [2, 5], // After position 1, skip 3 blanks (2,3,4)
+      [3, 6], // Next position
+      [4, 9], // After position 3, skip 2 blanks (7,8)
+      [5, 10],
+    ] as const
+  ).forEach(r => {
+    expect(mouseOverCoordToGlobalCoord(blanks, r[0])).toBe(r[1])
+  })
+})
+
+test('with blanks at the beginning', () => {
+  const blanks = [1, 2, 5]
+  ;(
+    [
+      [0, 0],
+      [1, 3], // After position 0, skip 2 blanks (1,2)
+      [2, 4],
+      [3, 6], // After position 2, skip 1 blank (5)
+      [4, 7],
+    ] as const
+  ).forEach(r => {
+    expect(mouseOverCoordToGlobalCoord(blanks, r[0])).toBe(r[1])
+  })
+})
+
+test('with position exceeding blanks array', () => {
+  const blanks = [2, 5]
+  ;(
+    [
+      [0, 0],
+      [1, 1],
+      [2, 3], // After position 1, skip 1 blank (2)
+      [3, 4],
+      [4, 6], // After position 3, skip 1 blank (5)
+      [10, 12], // Far beyond blanks array
+    ] as const
+  ).forEach(r => {
+    expect(mouseOverCoordToGlobalCoord(blanks, r[0])).toBe(r[1])
+  })
+})
+
+test('with gaps in sequence', () => {
+  const sequence = 'AC-GT-A'
+  expect(globalCoordToRowSpecificCoord(sequence, 0)).toBe(0)
+  expect(globalCoordToRowSpecificCoord(sequence, 1)).toBe(1)
+  expect(globalCoordToRowSpecificCoord(sequence, 2)).toBe(2)
+  // Position 3 in global coordinates is after the gap
+  expect(globalCoordToRowSpecificCoord(sequence, 3)).toBe(2)
+  expect(globalCoordToRowSpecificCoord(sequence, 4)).toBe(3)
+  expect(globalCoordToRowSpecificCoord(sequence, 5)).toBe(4)
+  // Position 6 in global coordinates is after the gap
+  expect(globalCoordToRowSpecificCoord(sequence, 6)).toBe(4)
+})
+
+test('with no gaps in sequence', () => {
+  const sequence = 'ACGTA'
+  expect(globalCoordToRowSpecificCoord(sequence, 0)).toBe(0)
+  expect(globalCoordToRowSpecificCoord(sequence, 1)).toBe(1)
+  expect(globalCoordToRowSpecificCoord(sequence, 2)).toBe(2)
+  expect(globalCoordToRowSpecificCoord(sequence, 3)).toBe(3)
+  expect(globalCoordToRowSpecificCoord(sequence, 4)).toBe(4)
+})
+
+test('with all gaps in sequence', () => {
+  const sequence = '-----'
+  expect(globalCoordToRowSpecificCoord(sequence, 0)).toBe(0)
+  expect(globalCoordToRowSpecificCoord(sequence, 1)).toBe(0)
+  expect(globalCoordToRowSpecificCoord(sequence, 2)).toBe(0)
+  expect(globalCoordToRowSpecificCoord(sequence, 3)).toBe(0)
+  expect(globalCoordToRowSpecificCoord(sequence, 4)).toBe(0)
+})
+
+test('with position exceeding sequence length', () => {
+  const sequence = 'AC-GT'
+  expect(globalCoordToRowSpecificCoord(sequence, 10)).toBe(4)
+})
+
+test('mouseOverCoordToGapRemovedCoord', () => {
+  const seq = 'AC--GT--CT'
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 0, blanks: [] }),
+  ).toBe(0)
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 1, blanks: [] }),
+  ).toBe(1)
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 2, blanks: [] }),
+  ).toBe(undefined)
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 3, blanks: [] }),
+  ).toBe(undefined)
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 4, blanks: [] }),
+  ).toBe(2)
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 5, blanks: [] }),
+  ).toBe(3)
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 6, blanks: [] }),
+  ).toBe(undefined)
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 7, blanks: [] }),
+  ).toBe(undefined)
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 8, blanks: [] }),
+  ).toBe(4)
+  expect(
+    mouseOverCoordToGapRemovedCoord({ seq, position: 9, blanks: [] }),
+  ).toBe(5)
+})

package/src/rowCoordinateCalculations.ts

@@ -1,26 +1,103 @@
-export function mouseOverCoordToGlobalCoord(blanks: number[], pos: number) {
-  let i = 0 // 'mouse over coord'
-  let j = 0 // 'position in blanks array'
-  let k = 0 // 'global coord'/return value
-
-  for (; i < pos; i++, k++) {
-    // skip multiple gaps in a row
-    while (j < blanks.length && blanks[j]! - 1 === k) {
-      j++
-      k++
+import { isBlank } from './util'
+
+export function mouseOverCoordToGlobalCoord(
+  blanks: number[],
+  position: number,
+) {
+  let mousePosition = 0 // Current position in mouse coordinates
+  let blankArrayIndex = 0 // Current index in the blanks array
+  let globalPosition = 0 // Position in global coordinates (return value)
+  const blanksLen = blanks.length
+
+  // Iterate until we reach the target mouse position
+  while (mousePosition < position) {
+    // Skip any blank positions in the sequence
+    while (
+      blankArrayIndex < blanksLen &&
+      blanks[blankArrayIndex]! - 1 === globalPosition
+    ) {
+      blankArrayIndex++
+      globalPosition++
     }
+
+    // Move to next position
+    mousePosition++
+    globalPosition++
   }
-  return k
+
+  return globalPosition
 }
 
-export function globalCoordToRowSpecificCoord(seq: string, pos: number) {
-  let k = 0
-  for (let i = 0; i < pos; i++) {
-    if (seq[i] !== '-') {
-      k++
-    } else if (k >= pos) {
+export function globalCoordToRowSpecificCoord(seq: string, position: number) {
+  // Initialize counter for non-gap characters
+  let nonGapCount = 0
+  // Initialize position counter
+  let currentPosition = 0
+  const sequenceLength = seq.length
+
+  // Iterate until we reach the target position or end of sequence
+  while (currentPosition < position && currentPosition < sequenceLength) {
+    // If current character is not a gap, increment the non-gap counter
+    if (seq[currentPosition] !== '-') {
+      nonGapCount++
+    }
+    // If we've reached the target position in non-gap coordinates, break
+    else if (nonGapCount >= position) {
       break
     }
+    currentPosition++
   }
-  return k
+
+  return nonGapCount
+}
+
+export function mouseOverCoordToGapRemovedRowCoord({
+  rowName,
+  position,
+  rowMap,
+  blanks,
+}: {
+  rowName: string
+  position: number
+  rowMap: Map<string, string>
+  blanks: number[]
+}) {
+  const seq = rowMap.get(rowName)
+  return seq !== undefined
+    ? mouseOverCoordToGapRemovedCoord({
+        seq,
+        position,
+        blanks,
+      })
+    : undefined
+}
+
+export function mouseOverCoordToGapRemovedCoord({
+  seq,
+  blanks,
+  position,
+}: {
+  seq: string
+  blanks: number[]
+  position: number
+}) {
+  // First convert the mouse position to global coordinates
+  const globalPos = mouseOverCoordToGlobalCoord(blanks, position)
+  const seqLen = seq.length
+
+  // Check if the position in the sequence is a gap
+  if (globalPos < seqLen && isBlank(seq[globalPos])) {
+    return undefined
+  }
+
+  // Count non-gap characters up to the global position
+  let nonGapCount = 0
+  for (let i = 0; i < globalPos && i < seqLen; i++) {
+    if (!isBlank(seq[i])) {
+      nonGapCount++
+    }
+  }
+
+  // If we're at a valid position, return the count of non-gap characters
+  return globalPos < seqLen ? nonGapCount : undefined
 }

package/src/seqCoordToRowSpecificGlobalCoord.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, test } from 'vitest'
+
+import { seqCoordToRowSpecificGlobalCoord } from './seqCoordToRowSpecificGlobalCoord'
+
+describe('seqCoordToRowSpecificGlobalCoord', () => {
+  test('converts sequence coordinate to global coordinate with no gaps', () => {
+    const row = 'ATGCATGC'
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(3)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 8 })).toBe(8)
+  })
+
+  test('converts sequence coordinate to global coordinate with gaps', () => {
+    const row = 'A-TG-CA-TGC'
+    // A(0) -(1) T(2) G(3) -(4) C(5) A(6) -(7) T(8) G(9) C(10)
+    // Sequence positions: A(0) T(1) G(2) C(3) A(4) T(5) G(6) C(7)
+
+    // Position 0 (first A) -> Global index 0
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
+
+    // Position 1 (T after first gap) -> Global index 2
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 1 })).toBe(1)
+
+    // Position 3 (C after second gap) -> Global index 5
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(4)
+
+    // Position 5 (T after third gap) -> Global index 8
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 5 })).toBe(7)
+
+    // Position 8 (end of sequence) -> Global index 11
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 8 })).toBe(11)
+  })
+
+  test('handles empty row', () => {
+    expect(seqCoordToRowSpecificGlobalCoord({ row: '', position: 0 })).toBe(0)
+  })
+
+  test('handles row with only gaps', () => {
+    const row = '---..--'
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
+  })
+
+  test('handles mixed gap characters', () => {
+    const row = 'A-.G-C.'
+    // A(0) -(1) .(2) G(3) -(4) C(5) .(6)
+    // Sequence positions: A(0) G(1) C(2)
+
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 1 })).toBe(1)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 2 })).toBe(4)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(6)
+  })
+})

package/src/seqCoordToRowSpecificGlobalCoord.ts

@@ -0,0 +1,20 @@
+import { isBlank } from './util'
+
+export function seqCoordToRowSpecificGlobalCoord({
+  row,
+  position,
+}: {
+  row: string
+  position: number
+}) {
+  let k = 0
+  let i = 0
+  for (; k < position; i++) {
+    if (!isBlank(row[i])) {
+      k++
+    } else if (k >= position) {
+      break
+    }
+  }
+  return i
+}