react-msaview 4.5.0 → 4.6.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,7 @@ 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) {
@@ -89,19 +83,16 @@ 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
@@ -150,8 +141,7 @@ export function renderTreeLabels({
 }) {
   const {
     fontSize,
-    showBranchLen: showBranchLenPre,
-    allBranchesLength0,
+    showBranchLenEffective: showBranchLen,
     treeMetadata,
     hierarchy,
     collapsed,
@@ -167,13 +157,13 @@ 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 },
@@ -187,28 +177,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 +208,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 +295,6 @@ export function renderTreeCanvas({
         offsetY,
         clickMap,
         model,
-        theme,
         blockSizeYOverride,
       })
     }

package/src/model.ts

@@ -321,6 +321,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 +459,13 @@ function stateModelFactory() {
 
         self.hoveredTreeNode = { nodeId, descendantNames }
       },
+      /**
+       * #action
+       * set highlighted columns
+       */
+      setHighlightedColumns(columns?: number[]) {
+        self.highlightedColumns = columns
+      },
       /**
        * #action
        */
@@ -1217,6 +1230,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 => ({
       /**

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.4.7'
+export const version = '4.5.0'