react-msaview 4.3.0 → 4.4.1

package/src/components/header/TreeMenu.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import AccountTree from '@mui/icons-material/AccountTree'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model'
+
+const TreeMenu = observer(({ model }: { model: MsaViewModel }) => {
+  const {
+    drawTree,
+    showBranchLen,
+    labelsAlignRight,
+    drawNodeBubbles,
+    drawLabels,
+    treeWidthMatchesArea,
+    noTree,
+  } = model
+  return (
+    <CascadingMenuButton
+      closeAfterItemClick={false}
+      menuItems={[
+        {
+          label: 'Show branch length',
+          type: 'checkbox',
+          checked: showBranchLen,
+          onClick: () => {
+            model.setShowBranchLen(!showBranchLen)
+          },
+        },
+        {
+          label: 'Show tree',
+          type: 'checkbox',
+          checked: drawTree,
+          onClick: () => {
+            model.setDrawTree(!drawTree)
+          },
+        },
+        {
+          label: 'Draw clickable bubbles on tree branches',
+          type: 'checkbox',
+          checked: drawNodeBubbles,
+          onClick: () => {
+            model.setDrawNodeBubbles(!drawNodeBubbles)
+          },
+        },
+        {
+          label: 'Tree labels align right',
+          type: 'checkbox',
+          checked: labelsAlignRight,
+          onClick: () => {
+            model.setLabelsAlignRight(!labelsAlignRight)
+          },
+        },
+        {
+          label: 'Draw labels',
+          type: 'checkbox',
+          checked: drawLabels,
+          onClick: () => {
+            model.setDrawLabels(!drawLabels)
+          },
+        },
+        ...(noTree
+          ? []
+          : [
+              {
+                label: 'Make tree width fit to tree area',
+                type: 'checkbox' as const,
+                checked: treeWidthMatchesArea,
+                onClick: () => {
+                  model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
+                },
+              },
+            ]),
+      ]}
+    >
+      <AccountTree />
+    </CascadingMenuButton>
+  )
+})
+
+export default TreeMenu

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -56,7 +56,8 @@ function drawTiles({
     tidyFilteredGatheredInterProAnnotations,
   } = model
 
-  for (const node of visibleLeaves) {
+  for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
+    const node = visibleLeaves[i]!
     const {
       x,
       data: { name },
@@ -65,9 +66,9 @@ function drawTiles({
 
     const entry = tidyFilteredGatheredInterProAnnotations[name]
 
-    let j = 0
     if (entry) {
-      for (const { start, end, accession } of entry) {
+      for (let j = 0, l2 = entry.length; j < l2; j++) {
+        const { start, end, accession } = entry[j]!
         const m1 = model.seqCoordToRowSpecificGlobalCoord(name, start - 1)
         const m2 = model.seqCoordToRowSpecificGlobalCoord(name, end)
         const x = m1 * colWidth
@@ -78,7 +79,6 @@ function drawTiles({
         const lw = colWidth * (m2 - m1)
         ctx.fillRect(x, t, lw, h)
         ctx.strokeRect(x, t, lw, h)
-        j++
       }
     }
   }

package/src/components/msa/renderMSABlock.ts

@@ -34,6 +34,7 @@ export function renderMSABlock({
     highResScaleFactor,
     actuallyShowDomains,
     leaves,
+    bgColor,
   } = model
   const k = highResScaleFactorOverride || highResScaleFactor
   const bx = blockSizeXOverride || blockSize
@@ -42,7 +43,7 @@ export function renderMSABlock({
   ctx.scale(k, k)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
-  ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
+  ctx.font = ctx.font.replace(/\d+px/, `${bgColor ? '' : 'bold '}${fontSize}px`)
 
   const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
   const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
@@ -102,38 +103,40 @@ function drawTiles({
     rowHeight,
   } = model
 
-  for (const node of visibleLeaves) {
+  for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
+    const node = visibleLeaves[i]!
     const {
       data: { name },
     } = node
     const y = node.x!
     const str = columns[name]?.slice(xStart, xEnd)
     if (str) {
-      for (let i = 0; i < str.length; i++) {
+      for (let i = 0, l2 = str.length; i < l2; i++) {
         const letter = str[i]!
-        const color =
-          colorSchemeName === 'clustalx_protein_dynamic'
-            ? getClustalXColor(
-                // use model.colStats dot notation here: delay use of colStats
-                // until absolutely needed
+        const r1 = colorSchemeName === 'clustalx_protein_dynamic'
+        const r2 = colorSchemeName === 'percent_identity_dynamic'
+        const color = r1
+          ? getClustalXColor(
+              // use model.colStats dot notation here: delay use of colStats
+              // until absolutely needed
+              model.colStats[xStart + i]!,
+              model.colStatsSums[xStart + i]!,
+              model,
+              name,
+              xStart + i,
+            )
+          : r2
+            ? getPercentIdentityColor(
+                // use model.colStats dot notation here: delay use of
+                // colStats until absolutely needed
                 model.colStats[xStart + i]!,
                 model.colStatsSums[xStart + i]!,
                 model,
                 name,
                 xStart + i,
               )
-            : colorSchemeName === 'percent_identity_dynamic'
-              ? getPercentIdentityColor(
-                  // use model.colStats dot notation here: delay use of
-                  // colStats until absolutely needed
-                  model.colStats[xStart + i]!,
-                  model.colStatsSums[xStart + i]!,
-                  model,
-                  name,
-                  xStart + i,
-                )
-              : colorScheme[letter.toUpperCase()]
-        if (bgColor) {
+            : colorScheme[letter.toUpperCase()]
+        if (bgColor || r1 || r2) {
           ctx.fillStyle = color || theme.palette.background.default
           ctx.fillRect(
             i * colWidth + offsetX - (offsetX % colWidth),
@@ -176,14 +179,15 @@ function drawText({
     rowHeight,
   } = model
   if (showMsaLetters) {
-    for (const node of visibleLeaves) {
+    for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
+      const node = visibleLeaves[i]!
       const {
         data: { name },
       } = node
       const y = node.x!
       const str = columns[name]?.slice(xStart, xEnd)
       if (str) {
-        for (let i = 0; i < str.length; i++) {
+        for (let i = 0, l2 = str.length; i < l2; i++) {
           const letter = str[i]!
           const color = colorScheme[letter.toUpperCase()]
           const contrast = contrastLettering

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)
               }
             }
@@ -948,14 +954,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 +982,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 +992,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 +1006,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 +1143,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 +1154,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 +1183,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 +1326,11 @@ function stateModelFactory() {
        * #action
        */
       reset() {
-        self.setData({ tree: '', msa: '' })
+        self.setData({
+          tree: '',
+          msa: '',
+        })
+        self.resetZoom()
         self.setError(undefined)
         self.setScrollY(0)
         self.setScrollX(0)
@@ -1402,7 +1411,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 +1434,9 @@ function stateModelFactory() {
             if (treeMetadataFilehandle) {
               try {
                 self.setTreeMetadata(
-                  await openLocation(treeMetadataFilehandle).readFile('utf8'),
+                  await fetchAndMaybeUnzipText(
+                    openLocation(treeMetadataFilehandle),
+                  ),
                 )
               } catch (e) {
                 console.error(e)
@@ -1443,9 +1454,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)
+})