react-msaview 4.5.0 → 4.8.0

package/src/components/msa/renderMSABlock.ts

@@ -65,7 +65,6 @@ export function renderMSABlock({
     ctx,
     offsetX,
     contrastScheme,
-    theme,
     xStart,
     xEnd,
     visibleLeaves,
@@ -112,6 +111,10 @@ function drawTiles({
     ? columns[relativeTo]?.slice(xStart, xEnd)
     : null
 
+  const isClustalX = colorSchemeName === 'clustalx_protein_dynamic'
+  const isPercentIdentity = colorSchemeName === 'percent_identity_dynamic'
+  const offsetXAligned = offsetX - (offsetX % colWidth)
+
   for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
     const node = visibleLeaves[i]!
     const {
@@ -120,31 +123,29 @@ function drawTiles({
     const y = node.x!
     const str = columns[name]?.slice(xStart, xEnd)
     if (str) {
-      for (let i = 0, l2 = str.length; i < l2; i++) {
-        const letter = str[i]!
+      for (let j = 0, l2 = str.length; j < l2; j++) {
+        const letter = str[j]!
 
         // Use a muted background for positions that match reference
         const isMatchingReference =
-          referenceSeq && name !== relativeTo && letter === referenceSeq[i]
+          referenceSeq && name !== relativeTo && letter === referenceSeq[j]
 
-        const r1 = colorSchemeName === 'clustalx_protein_dynamic'
-        const r2 = colorSchemeName === 'percent_identity_dynamic'
-        const color = r1
-          ? model.colClustalX[xStart + i]![letter]
-          : r2
+        const color = isClustalX
+          ? model.colClustalX[xStart + j]![letter]
+          : isPercentIdentity
             ? (() => {
-                const consensus = model.colConsensus[xStart + i]!
+                const consensus = model.colConsensus[xStart + j]!
                 return letter === consensus.letter ? consensus.color : undefined
               })()
             : colorScheme[letter.toUpperCase()]
-        if (bgColor || r1 || r2) {
+        if (bgColor || isClustalX || isPercentIdentity) {
           // Use a very light background for matching positions in relative mode
           const finalColor = isMatchingReference
             ? theme.palette.action.hover
             : color || theme.palette.background.default
           ctx.fillStyle = finalColor
           ctx.fillRect(
-            i * colWidth + offsetX - (offsetX % colWidth),
+            j * colWidth + offsetXAligned,
             y - rowHeight,
             colWidth,
             rowHeight,
@@ -167,7 +168,6 @@ function drawText({
   offsetX: number
   model: MsaViewModel
   contrastScheme: Record<string, string>
-  theme: Theme
   ctx: CanvasRenderingContext2D
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
@@ -191,20 +191,24 @@ function drawText({
     : null
 
   if (showMsaLetters) {
+    const offsetXAligned = offsetX - (offsetX % colWidth)
+    const halfColWidth = colWidth / 2
+    const quarterRowHeight = rowHeight / 4
+
     for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
       const node = visibleLeaves[i]!
       const {
         data: { name },
       } = node
-      const y = node.x!
+      const y = node.x! - quarterRowHeight
       const str = columns[name]?.slice(xStart, xEnd)
       if (str) {
-        for (let i = 0, l2 = str.length; i < l2; i++) {
-          const letter = str[i]!
+        for (let j = 0, l2 = str.length; j < l2; j++) {
+          const letter = str[j]!
 
           // Check if this position matches the reference
           const isMatchingReference =
-            referenceSeq && name !== relativeTo && letter === referenceSeq[i]
+            referenceSeq && name !== relativeTo && letter === referenceSeq[j]
 
           // Show dot for matching positions, original letter for differences
           const displayLetter = isMatchingReference ? '.' : letter
@@ -213,7 +217,6 @@ function drawText({
           const contrast = contrastLettering
             ? contrastScheme[letter.toUpperCase()] || 'black'
             : 'black'
-          const x = i * colWidth + offsetX - (offsetX % colWidth)
 
           // note: -rowHeight/4 matches +rowHeight/4 in tree
           ctx.fillStyle = actuallyShowDomains
@@ -221,7 +224,11 @@ function drawText({
             : bgColor
               ? contrast
               : color || 'black'
-          ctx.fillText(displayLetter, x + colWidth / 2, y - rowHeight / 4)
+          ctx.fillText(
+            displayLetter,
+            j * colWidth + offsetXAligned + halfColWidth,
+            y,
+          )
         }
       }
     }

package/src/components/msa/renderMSAMouseover.ts

@@ -28,6 +28,7 @@ export function renderMouseover({
     relativeTo,
     rowNamesSet,
     hoveredTreeNode,
+    highlightedColumns,
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width, height)
@@ -52,6 +53,14 @@ export function renderMouseover({
     }
   }
 
+  // Highlight multiple columns
+  if (highlightedColumns?.length) {
+    ctx.fillStyle = highlightColor
+    for (const col of highlightedColumns) {
+      ctx.fillRect(col * colWidth + scrollX, 0, colWidth, height)
+    }
+  }
+
   if (mouseCol !== undefined) {
     ctx.fillStyle = hoverColor
     ctx.fillRect(mouseCol * colWidth + scrollX, 0, colWidth, height)

package/src/components/tree/renderTreeCanvas.ts

@@ -42,15 +42,9 @@ export function renderTree({
   theme: Theme
   blockSizeYOverride?: number
 }) {
-  const {
-    hierarchy,
-    allBranchesLength0,
-    showBranchLen: showBranchLenPre,
-    blockSize,
-  } = model
+  const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model
   const by = blockSizeYOverride || blockSize
   ctx.strokeStyle = theme.palette.text.primary
-  const showBranchLen = allBranchesLength0 ? false : showBranchLenPre
   for (const link of hierarchy.links()) {
     const { source, target } = link
     if (target.height === 0 && !showBranchLen) {
@@ -58,10 +52,11 @@ export function renderTree({
     }
     const sy = source.x!
     const ty = target.x!
-    // @ts-expect-error
-    const tx = showBranchLen ? target.len : target.y
-    // @ts-expect-error
-    const sx = showBranchLen ? source.len : source.y
+    const tx = showBranchLen ? (target as { len?: number }).len : target.y
+    const sx = showBranchLen ? (source as { len?: number }).len : source.y
+    if (tx === undefined || sx === undefined) {
+      continue
+    }
 
     const y1 = Math.min(sy, ty)
     const y2 = Math.max(sy, ty)
@@ -89,23 +84,22 @@ export function renderNodeBubbles({
   clickMap?: ClickMapIndex
   offsetY: number
   model: MsaViewModel
-  theme: Theme
   blockSizeYOverride?: number
 }) {
   const {
     hierarchy,
-    showBranchLen: showBranchLenPre,
-    allBranchesLength0,
+    showBranchLenEffective: showBranchLen,
     collapsed,
     blockSize,
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride || blockSize
-  const showBranchLen = allBranchesLength0 ? false : showBranchLenPre
   for (const node of hierarchy.descendants()) {
-    const val = showBranchLen ? 'len' : 'y'
-    // @ts-expect-error
-    const { [val]: x, data } = node
+    const x = showBranchLen ? (node as { len?: number }).len : node.y
+    if (x === undefined) {
+      continue
+    }
+    const { data } = node
     const y = node.x!
     const { id, name } = data
     if (
@@ -150,8 +144,7 @@ export function renderTreeLabels({
 }) {
   const {
     fontSize,
-    showBranchLen: showBranchLenPre,
-    allBranchesLength0,
+    showBranchLenEffective: showBranchLen,
     treeMetadata,
     hierarchy,
     collapsed,
@@ -167,19 +160,18 @@ export function renderTreeLabels({
     noTree,
   } = model
   const by = blockSizeYOverride || blockSize
+  const emHeight = ctx.measureText('M').width
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
     ctx.setLineDash([1, 3])
   } else {
     ctx.textAlign = 'start'
   }
-  const showBranchLen = allBranchesLength0 ? false : showBranchLenPre
   for (const node of leaves) {
     const {
       data: { name, id },
-      // @ts-expect-error
-      len,
     } = node
+    const len = (node as { len?: number }).len
     const y = node.x!
     const x = node.y!
 
@@ -187,28 +179,29 @@ export function renderTreeLabels({
     if (y > offsetY - extendBounds && y < offsetY + by + extendBounds) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
-      let xp = (showBranchLen ? len : x) || 0
-      if (
-        !showBranchLen &&
-        !collapsed.includes(id) &&
-        !collapsedLeaves.includes(id)
-      ) {
-        // this subtraction is a hack to compensate for the leafnode rendering
-        // glitch (issue #71). the context is that an extra leaf node is added
-        // so that 'collapsing/hiding leaf nodes is possible' but this causes
-        // weird workarounds
-        xp -= treeWidth / hierarchy.height
+      let xp = 0
+      if (!noTree) {
+        xp = (showBranchLen ? len : x) || 0
+        if (
+          !showBranchLen &&
+          !collapsed.includes(id) &&
+          !collapsedLeaves.includes(id)
+        ) {
+          // this subtraction is a hack to compensate for the leafnode rendering
+          // glitch (issue #71). the context is that an extra leaf node is added
+          // so that 'collapsing/hiding leaf nodes is possible' but this causes
+          // weird workarounds
+          xp -= treeWidth / hierarchy.height
+        }
       }
 
       const { width } = ctx.measureText(displayName)
-      const height = ctx.measureText('M').width // use an 'em' for height
 
       ctx.fillStyle = theme.palette.text.primary
       if (labelsAlignRight) {
         const smallPadding = 2
         const offset = treeAreaWidthMinusMargin - smallPadding
         if (drawTree && !noTree) {
-          const { width } = ctx.measureText(displayName)
           ctx.moveTo(xp + radius + 2, y)
           ctx.lineTo(offset - smallPadding - width, y)
           ctx.stroke()
@@ -217,17 +210,18 @@ export function renderTreeLabels({
         clickMap?.insert({
           minX: treeAreaWidth - width,
           maxX: treeAreaWidth,
-          minY: yp - height,
+          minY: yp - emHeight,
           maxY: yp,
           name,
           id,
         })
       } else {
-        ctx.fillText(displayName, xp + d, yp)
+        const labelX = noTree ? 2 : xp + d
+        ctx.fillText(displayName, labelX, yp)
         clickMap?.insert({
-          minX: xp + d + marginLeft,
-          maxX: xp + d + width + marginLeft,
-          minY: yp - height,
+          minX: labelX + marginLeft,
+          maxX: labelX + width + marginLeft,
+          minY: yp - emHeight,
           maxY: yp,
           name,
           id,
@@ -303,7 +297,6 @@ export function renderTreeCanvas({
         offsetY,
         clickMap,
         model,
-        theme,
         blockSizeYOverride,
       })
     }

package/src/declare.d.ts

@@ -1,2 +1 @@
-declare module 'stockholm-js'
 declare module 'svgcanvas'

package/src/model.ts

@@ -9,14 +9,25 @@ import {
 } from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
+import {
+  A3mMSA,
+  ClustalMSA,
+  EmfMSA,
+  FastaMSA,
+  StockholmMSA,
+  generateNodeIds,
+  gffToInterProResults,
+  parseEmfTree,
+  parseGFF,
+  parseNewick,
+  stockholmSniff,
+} from '@react-msaview/parsers'
 import { colord } from 'colord'
 import { ascending } from 'd3-array'
 import { cluster, hierarchy } from 'd3-hierarchy'
-import { parseEmfTree } from 'emf-js'
 import { saveAs } from 'file-saver'
 import { autorun, transaction } from 'mobx'
 import { addDisposer, cast, types } from 'mobx-state-tree'
-import Stockholm from 'stockholm-js'
 
 import { blocksX, blocksY } from './calculateBlocks'
 import colorSchemes from './colorSchemes'
@@ -55,26 +66,14 @@ import { MSAModelF } from './model/msaModel'
 import { TreeModelF } from './model/treeModel'
 import { calculateNeighborJoiningTree } from './neighborJoining'
 import { parseAsn1 } from './parseAsn1'
-import parseNewick from './parseNewick'
-import A3mMSA from './parsers/A3mMSA'
-import ClustalMSA from './parsers/ClustalMSA'
-import EmfMSA from './parsers/EmfMSA'
-import FastaMSA from './parsers/FastaMSA'
-import StockholmMSA from './parsers/StockholmMSA'
 import { reparseTree } from './reparseTree'
 import {
-  mouseOverCoordToGapRemovedRowCoord,
-  mouseOverCoordToGlobalCoord,
+  globalColToVisibleCol,
+  visibleColToGlobalCol,
+  visibleColToSeqPosForRow,
 } from './rowCoordinateCalculations'
-import { seqCoordToRowSpecificGlobalCoord } from './seqCoordToRowSpecificGlobalCoord'
-import {
-  collapse,
-  generateNodeIds,
-  len,
-  maxLength,
-  setBrLength,
-  skipBlanks,
-} from './util'
+import { seqPosToGlobalCol } from './seqPosToGlobalCol'
+import { collapse, len, maxLength, setBrLength, skipBlanks } from './util'
 
 import type { InterProScanResults } from './launchInterProScan'
 import type {
@@ -193,6 +192,12 @@ function stateModelFactory() {
          */
         treeMetadataFilehandle: types.maybe(FileLocation),
 
+        /**
+         * #property
+         * filehandle object for InterProScan GFF file
+         */
+        gffFilehandle: types.maybe(FileLocation),
+
         /**
          * #property
          *
@@ -321,6 +326,12 @@ function stateModelFactory() {
         | { nodeId: string; descendantNames: string[] }
         | undefined,
 
+      /**
+       * #volatile
+       * array of column indices to highlight
+       */
+      highlightedColumns: undefined as number[] | undefined,
+
       /**
        * #volatile
        * a dummy variable that is incremented when ref changes so autorun for
@@ -453,6 +464,13 @@ function stateModelFactory() {
 
         self.hoveredTreeNode = { nodeId, descendantNames }
       },
+      /**
+       * #action
+       * set highlighted columns
+       */
+      setHighlightedColumns(columns?: number[]) {
+        self.highlightedColumns = columns
+      },
       /**
        * #action
        */
@@ -556,6 +574,13 @@ function stateModelFactory() {
         self.treeFilehandle = treeFilehandle
       },
 
+      /**
+       * #action
+       */
+      setGFFFilehandle(gffFilehandle?: FileLocationType) {
+        self.gffFilehandle = gffFilehandle
+      },
+
       /**
        * #action
        */
@@ -677,7 +702,7 @@ function stateModelFactory() {
       get MSA() {
         const text = self.data.msa
         if (text) {
-          if (Stockholm.sniff(text)) {
+          if (stockholmSniff(text)) {
             return new StockholmMSA(text, self.currentAlignment)
           } else if (A3mMSA.sniff(text)) {
             return new A3mMSA(text)
@@ -1217,6 +1242,14 @@ function stateModelFactory() {
       get allBranchesLength0() {
         return this.hierarchy.links().every(s => !s.source.data.length)
       },
+
+      /**
+       * #getter
+       * effective showBranchLen accounting for allBranchesLength0
+       */
+      get showBranchLenEffective() {
+        return this.allBranchesLength0 ? false : self.showBranchLen
+      },
     }))
     .views(self => ({
       /**
@@ -1464,7 +1497,7 @@ function stateModelFactory() {
             .map(t => ({
               model: {
                 ...t,
-                data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data,
+                data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data!,
                 height: rowHeight,
               } as TextTrackModel,
               ReactComponent: TextTrack,
@@ -1510,22 +1543,30 @@ function stateModelFactory() {
 
       /**
        * #method
-       * return a row-specific letter, or undefined if gap
+       * Return a row-specific letter at a visible column, or undefined if gap.
+       *
+       * @param rowName - The name of the row
+       * @param visibleCol - The visible column index (what the user sees on screen)
+       * @returns The letter at that position, or undefined if it's a gap
        */
-      mouseOverCoordToRowLetter(rowName: string, pos: number) {
+      visibleColToRowLetter(rowName: string, visibleCol: number) {
         const { rowMap, blanks } = self
-        return rowMap.get(rowName)?.[mouseOverCoordToGlobalCoord(blanks, pos)]
+        return rowMap.get(rowName)?.[visibleColToGlobalCol(blanks, visibleCol)]
       },
 
       /**
        * #method
-       * return a row-specific sequence coordinate, skipping gaps, given a
-       * global coordinate
+       * Convert a visible column to a row-specific sequence position (0-based).
+       * Returns undefined if the position is a gap in the sequence.
+       *
+       * @param rowName - The name of the row
+       * @param visibleCol - The visible column index
+       * @returns The sequence position (0-based), or undefined if it's a gap
        */
-      mouseOverCoordToGapRemovedRowCoord(rowName: string, position: number) {
-        return mouseOverCoordToGapRemovedRowCoord({
+      visibleColToSeqPos(rowName: string, visibleCol: number) {
+        return visibleColToSeqPosForRow({
           rowName,
-          position,
+          visibleCol,
           rowMap: self.rowMap,
           blanks: self.blanks,
         })
@@ -1533,32 +1574,67 @@ function stateModelFactory() {
 
       /**
        * #method
-       * return a row-specific sequence coordinate, skipping gaps, given a
-       * global coordinate
-       */
-      mouseOverCoordToGapRemovedRowCoordOneBased(
-        rowName: string,
-        position: number,
-      ) {
-        const val = this.mouseOverCoordToGapRemovedRowCoord(rowName, position)
+       * Convert a visible column to a row-specific sequence position (1-based).
+       * Returns undefined if the position is a gap in the sequence.
+       *
+       * @param rowName - The name of the row
+       * @param visibleCol - The visible column index
+       * @returns The sequence position (1-based), or undefined if it's a gap
+       */
+      visibleColToSeqPosOneBased(rowName: string, visibleCol: number) {
+        const val = this.visibleColToSeqPos(rowName, visibleCol)
         return val !== undefined ? val + 1 : undefined
       },
 
       /**
        * #method
-       * return a global coordinate given a row-specific sequence coordinate
-       * which does not not include gaps
+       * Convert a global column index to a visible column index.
+       * Returns undefined if the column is hidden (in blanks).
+       * This is the inverse of visibleColToGlobalCol.
+       *
+       * @param globalCol - The global column index in the full MSA
+       * @returns The visible column index, or undefined if the column is hidden
        */
-      seqCoordToRowSpecificGlobalCoord(rowName: string, position: number) {
+      globalColToVisibleCol(globalCol: number) {
+        const { blanks, hideGapsEffective } = self
+        if (!hideGapsEffective) {
+          return globalCol
+        }
+        return globalColToVisibleCol(blanks, globalCol)
+      },
+
+      /**
+       * #method
+       * Convert a sequence position (ungapped) to a global column index.
+       *
+       * @param rowName - The name of the row
+       * @param seqPos - The sequence position (0-based, ungapped)
+       * @returns The global column index in the full MSA
+       */
+      seqPosToGlobalCol(rowName: string, seqPos: number) {
         const { rowNames, rows } = self
         const index = rowNames.indexOf(rowName)
         return index !== -1 && rows[index]
-          ? seqCoordToRowSpecificGlobalCoord({
+          ? seqPosToGlobalCol({
               row: rows[index][1],
-              position,
+              seqPos,
             })
           : 0
       },
+
+      /**
+       * #method
+       * Convert a sequence position (ungapped) directly to a visible column index.
+       * This combines seqPosToGlobalCol and globalColToVisibleCol.
+       *
+       * @param rowName - The name of the row
+       * @param seqPos - The sequence position (0-based, ungapped)
+       * @returns The visible column index, or undefined if the column is hidden
+       */
+      seqPosToVisibleCol(rowName: string, seqPos: number) {
+        const globalCol = this.seqPosToGlobalCol(rowName, seqPos)
+        return this.globalColToVisibleCol(globalCol)
+      },
     }))
 
     .views(self => ({
@@ -1830,6 +1906,31 @@ function stateModelFactory() {
           }),
         )
 
+        // autorun opens gffFilehandle for InterProScan domains
+        addDisposer(
+          self,
+          autorun(async () => {
+            const { gffFilehandle } = self
+            if (gffFilehandle) {
+              try {
+                const gffText = await fetchAndMaybeUnzipText(
+                  openLocation(gffFilehandle),
+                )
+                const gffRecords = parseGFF(gffText)
+                const interProResults = gffToInterProResults(gffRecords)
+                self.setInterProAnnotations(interProResults)
+                self.setShowDomains(true)
+                if (gffFilehandle.locationType === 'BlobLocation') {
+                  self.setGFFFilehandle(undefined)
+                }
+              } catch (e) {
+                console.error(e)
+                self.setError(e)
+              }
+            }
+          }),
+        )
+
         // autorun opens msaFilehandle
         addDisposer(
           self,