react-msaview 5.9.0 → 5.10.0

package/src/components/msa/renderMSAMouseover.ts

@@ -1,9 +1,12 @@
-import { multiRowHoverColor, referenceColor } from '../overlayColors.ts'
+import {
+  clickColor,
+  hoverColor,
+  multiRowHoverColor,
+  referenceColor,
+} from '../overlayColors.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const hoverColor = 'rgba(0,0,0,0.15)'
-const highlightColor = 'rgba(128,128,0,0.2)'
 // the persistent highlightColumns overlay: a stronger fill plus a solid border
 // so a domain/motif band reads clearly over the colored alignment cells (the
 // faint hover-style wash alone is invisible against clustalx coloring)
@@ -39,48 +42,50 @@ export function renderMouseover({
   ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
   ctx.scale(highResScaleFactor, highResScaleFactor)
 
-  // Highlight reference row (relativeTo) persistently
+  // rows and columns sit at a fixed pitch, so an index is all it takes to place
+  // a full-width or full-height band (matching fillRow in TreeCanvas)
+  const rowBand = (index: number) => {
+    ctx.fillRect(0, index * rowHeight + scrollY, width, rowHeight)
+  }
+  const colBand = (index: number) => {
+    ctx.fillRect(index * colWidth + scrollX, 0, colWidth, height)
+  }
+
+  // the reference row (relativeTo) stays lit, as does every tip under a hovered
+  // tree node
   if (referenceRowIndex !== undefined) {
     ctx.fillStyle = referenceColor
-    ctx.fillRect(0, referenceRowIndex * rowHeight + scrollY, width, rowHeight)
+    rowBand(referenceRowIndex)
   }
-
-  // Highlight multiple rows when hovering over tree nodes with children
-  if (hoveredRowIndices.length > 0) {
-    ctx.fillStyle = multiRowHoverColor
-    for (const rowIndex of hoveredRowIndices) {
-      ctx.fillRect(0, rowIndex * rowHeight + scrollY, width, rowHeight)
-    }
+  ctx.fillStyle = multiRowHoverColor
+  for (const rowIndex of hoveredRowIndices) {
+    rowBand(rowIndex)
   }
 
-  // Highlight multiple columns — draw each contiguous run as a filled, bordered
-  // band so a domain/motif highlight is clearly visible over the alignment
-  if (highlightedColumnRuns.length > 0) {
-    ctx.lineWidth = 2
-    for (const { start, end } of highlightedColumnRuns) {
-      const x = start * colWidth + scrollX
-      const w = (end - start + 1) * colWidth
-      ctx.fillStyle = highlightColumnsFill
-      ctx.fillRect(x, 0, w, height)
-      ctx.strokeStyle = highlightColumnsBorder
-      ctx.strokeRect(x, 0, w, height)
-    }
+  // each contiguous run of highlighted columns draws as one filled, bordered
+  // band, so a domain/motif highlight stays visible over the alignment
+  ctx.lineWidth = 2
+  for (const { start, end } of highlightedColumnRuns) {
+    const x = start * colWidth + scrollX
+    const w = (end - start + 1) * colWidth
+    ctx.fillStyle = highlightColumnsFill
+    ctx.fillRect(x, 0, w, height)
+    ctx.strokeStyle = highlightColumnsBorder
+    ctx.strokeRect(x, 0, w, height)
   }
 
+  ctx.fillStyle = hoverColor
   if (mouseCol !== undefined) {
-    ctx.fillStyle = hoverColor
-    ctx.fillRect(mouseCol * colWidth + scrollX, 0, colWidth, height)
+    colBand(mouseCol)
   }
   if (mouseRow !== undefined) {
-    ctx.fillStyle = hoverColor
-    ctx.fillRect(0, mouseRow * rowHeight + scrollY, width, rowHeight)
+    rowBand(mouseRow)
   }
+  ctx.fillStyle = clickColor
   if (mouseClickCol !== undefined) {
-    ctx.fillStyle = highlightColor
-    ctx.fillRect(mouseClickCol * colWidth + scrollX, 0, colWidth, height)
+    colBand(mouseClickCol)
   }
   if (mouseClickRow !== undefined) {
-    ctx.fillStyle = highlightColor
-    ctx.fillRect(0, mouseClickRow * rowHeight + scrollY, width, rowHeight)
+    rowBand(mouseClickRow)
   }
 }

package/src/components/overlayColors.ts

@@ -10,3 +10,9 @@ export const referenceColor = 'rgba(0,128,255,0.3)'
 // while the alignment cells are already colored so a lighter wash reads better.
 export const treeHoverColor = 'rgba(255,165,0,0.2)'
 export const multiRowHoverColor = 'rgba(255,165,0,0.15)'
+
+// the hovered column/row, and the one pinned by a click. Drawn on the alignment
+// overlay canvas and again as plain divs over the track area, which have to
+// match or the crosshair appears to change color as it crosses the tracks.
+export const hoverColor = 'rgba(0,0,0,0.15)'
+export const clickColor = 'rgba(128,128,0,0.2)'

package/src/components/tree/TreeCanvas.tsx

@@ -22,8 +22,8 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
-  const mouseoverRef = useCanvasAutorun(
-    ctx => {
+  const mouseoverRef = useCanvasAutorun({
+    draw: ctx => {
       if (isAlive(model)) {
         const {
           rowHeight,
@@ -61,8 +61,10 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
         }
       }
     },
-    [model],
-  )
+    width: treeAreaWidth,
+    height,
+    deps: [model],
+  })
 
   return (
     <div

package/src/components/tree/TreeCanvasBlock.tsx

@@ -60,15 +60,12 @@ const TreeCanvasBlock = observer(function ({
   const width = treeAreaWidth + padding
   const height = blockSize
 
-  const ref = useCanvasAutorun(
-    ctx => {
+  const canvasWidth = width * highResScaleFactor
+  const canvasHeight = height * highResScaleFactor
+  const ref = useCanvasAutorun({
+    draw: ctx => {
       ctx.resetTransform()
-      ctx.clearRect(
-        0,
-        0,
-        width * highResScaleFactor,
-        height * highResScaleFactor,
-      )
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
       renderTreeCanvas({
         ctx,
         model,
@@ -77,8 +74,10 @@ const TreeCanvasBlock = observer(function ({
         theme,
       })
     },
-    [model, clickMap, offsetY, theme],
-  )
+    width: canvasWidth,
+    height: canvasHeight,
+    deps: [model, clickMap, offsetY, theme],
+  })
 
   const style = {
     width,
@@ -112,8 +111,8 @@ const TreeCanvasBlock = observer(function ({
 
       <canvas
         ref={ref}
-        width={width * highResScaleFactor}
-        height={height * highResScaleFactor}
+        width={canvasWidth}
+        height={canvasHeight}
         style={{ ...style, cursor: hovered ? 'pointer' : 'default' }}
         onMouseMove={event => {
           onMouseMove(event)

package/src/components/tree/renderTreeCanvas.ts

@@ -45,7 +45,7 @@ export function getNodeX(
   return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * tipX
 }
 
-export function renderTree({
+function renderTree({
   offsetY,
   ctx,
   model,
@@ -89,7 +89,7 @@ export function renderTree({
   })
 }
 
-export function renderCollapsedTriangles({
+function renderCollapsedTriangles({
   ctx,
   clickMap,
   offsetY,
@@ -98,6 +98,7 @@ export function renderCollapsedTriangles({
   tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
+  collapsedSet,
 }: {
   ctx: RenderCtx
   clickMap?: ClickMapIndex
@@ -107,11 +108,11 @@ export function renderCollapsedTriangles({
   tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
+  collapsedSet: Set<string>
 }) {
   const {
     hierarchy,
     showBranchLenEffective: showBranchLen,
-    collapsed,
     blockSize,
     rowHeight,
     fontSize,
@@ -119,10 +120,9 @@ export function renderCollapsedTriangles({
   } = model
   // nothing collapsed is the common case, and the traversal below visits every
   // node in the tree on every block of every redraw
-  if (collapsed.length === 0) {
+  if (collapsedSet.size === 0) {
     return
   }
-  const collapsedSet = new Set(collapsed)
   const by = blockSizeYOverride ?? blockSize
   const halfHeight = Math.max(2, rowHeight * 0.42)
   forEachDescendant(hierarchy, node => {
@@ -171,7 +171,7 @@ export function renderCollapsedTriangles({
   })
 }
 
-export function renderNodeBubbles({
+function renderNodeBubbles({
   ctx,
   clickMap,
   offsetY,
@@ -179,6 +179,7 @@ export function renderNodeBubbles({
   tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
+  collapsedSet,
 }: {
   ctx: RenderCtx
   clickMap?: ClickMapIndex
@@ -187,16 +188,15 @@ export function renderNodeBubbles({
   tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
+  collapsedSet: Set<string>
 }) {
   const {
     hierarchy,
     showBranchLenEffective: showBranchLen,
-    collapsed,
     blockSize,
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride ?? blockSize
-  const collapsedSet = new Set(collapsed)
   forEachDescendant(hierarchy, node => {
     const x = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
     if (x === undefined) {
@@ -231,7 +231,7 @@ export function renderNodeBubbles({
   })
 }
 
-export function renderTreeLabels({
+function renderTreeLabels({
   theme,
   model,
   offsetY,
@@ -240,6 +240,7 @@ export function renderTreeLabels({
   tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
+  collapsedSet,
 }: {
   model: MsaViewModel
   offsetY: number
@@ -249,6 +250,7 @@ export function renderTreeLabels({
   tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
+  collapsedSet: Set<string>
 }) {
   const {
     fontSize,
@@ -262,16 +264,11 @@ export function renderTreeLabels({
     marginLeft,
     noTree,
     labelWidthMap,
-    collapsed,
   } = model
+  const by = blockSizeYOverride ?? blockSize
   // labels only exist for leaves, which are laid out top to bottom, so take the
   // same slice the MSA renderer uses instead of walking every tip per block
-  const visibleLeaves = getVisibleLeaves({
-    model,
-    offsetY,
-    blockSizeY: blockSizeYOverride ?? model.blockSize,
-  })
-  const by = blockSizeYOverride ?? blockSize
+  const visibleLeaves = getVisibleLeaves({ model, offsetY, blockSizeY: by })
   const emHeight = ctx.measureText('M').width
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
@@ -289,7 +286,7 @@ export function renderTreeLabels({
     const displayName = treeMetadata[name]?.genome || name
     // a collapsed clade is drawn as a triangle + tip count; suppress its leaf
     // label when the "name" is just the auto-generated internal-node id
-    const isAnonymousCollapsed = collapsed.includes(id) && name === id
+    const isAnonymousCollapsed = collapsedSet.has(id) && name === id
     if (!isAnonymousCollapsed && inYBlock(y, offsetY, by)) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
@@ -389,6 +386,9 @@ export function renderTreeCanvas({
   // maxBranchLength for the cladogram would pin every node to x=0 for a tree
   // with no branch lengths -- which is exactly what forces cladogram mode.
   const tipX = showBranchLenEffective ? maxBranchLength : treeWidth
+  // built once for all three passes: each of them asks about a different node on
+  // every block of every redraw, and `collapsed` is a list
+  const collapsedSet = new Set(model.collapsed)
 
   if (!noTree && drawTree) {
     renderTree({
@@ -410,6 +410,7 @@ export function renderTreeCanvas({
       tipX,
       maxDepthToLeaf,
       blockSizeYOverride,
+      collapsedSet,
     })
 
     if (drawNodeBubbles) {
@@ -421,6 +422,7 @@ export function renderTreeCanvas({
         tipX,
         maxDepthToLeaf,
         blockSizeYOverride,
+        collapsedSet,
       })
     }
   }
@@ -435,6 +437,7 @@ export function renderTreeCanvas({
       tipX,
       maxDepthToLeaf,
       blockSizeYOverride,
+      collapsedSet,
     })
   }
 

package/src/model.ts

@@ -1635,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)
       },
 
@@ -2084,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(
@@ -2174,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