react-msaview 5.2.0 → 5.3.0

package/src/components/header/ZoomMenu.tsx

@@ -37,6 +37,16 @@ const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
             model.resetZoom()
           },
         },
+        {
+          label: 'Scroll zoom',
+          type: 'checkbox',
+          checked: model.scrollZoom,
+          onClick: () => {
+            model.setScrollZoom(!model.scrollZoom)
+          },
+          helpText:
+            'When enabled, scrolling the mouse wheel zooms in and out without holding ctrl. Hold shift to pan instead. Ctrl/⌘+wheel always zooms.',
+        },
       ]}
     >
       <MoreVert />

package/src/components/minimap/Minimap.tsx

@@ -2,20 +2,16 @@ import React, { useCallback, useState } from 'react'
 
 import { observer } from 'mobx-react'
 
+import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
 import { useDragScroll } from '../../useDragScroll.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const [hovered, setHovered] = useState(false)
-  const { scrollX, msaAreaWidth, minimapHeight, colWidth, numColumns } = model
-  const unit = msaAreaWidth / numColumns / colWidth
-  const left = -scrollX
-  const right = left + msaAreaWidth
-  const s = left * unit
-  const e = right * unit
+  const { minimapHeight } = model
+  const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(model)
   const fill = 'rgba(66, 119, 127, 0.3)'
-  const w = Math.max(e - s, 20)
 
   const { startDrag } = useDragScroll(
     'x',
@@ -27,8 +23,6 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
     ),
   )
 
-  const barHeight = 12
-  const polygonHeight = minimapHeight - barHeight
   return (
     <div
       style={{
@@ -39,7 +33,7 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
     >
       <div
         style={{
-          height: barHeight,
+          height: MINIMAP_BAR_HEIGHT,
           boxSizing: 'border-box',
           border: '1px solid #555',
         }}
@@ -51,7 +45,7 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
           left: Math.max(0, s),
           background: hovered ? 'rgba(66,119,127,0.6)' : fill,
           cursor: 'pointer',
-          height: barHeight,
+          height: MINIMAP_BAR_HEIGHT,
           width: w,
           zIndex: 100,
         }}
@@ -67,10 +61,7 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
       />
 
       <svg height={polygonHeight} style={{ width: '100%' }}>
-        <polygon
-          fill={fill}
-          points={`${s + w},0 ${s},0 0,${polygonHeight} ${msaAreaWidth},${polygonHeight}`}
-        />
+        <polygon fill={fill} points={polygonPoints} />
       </svg>
     </div>
   )

package/src/components/minimap/MinimapSVG.tsx

@@ -2,26 +2,13 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
+import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 
 const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
-  const {
-    scrollX,
-    msaAreaWidth: W,
-    minimapHeight: H,
-    colWidth,
-    numColumns,
-  } = model
-
-  const BAR_HEIGHT = 12
-  const H2 = H - BAR_HEIGHT
-
-  const unit = W / numColumns / colWidth
-  const left = -scrollX
-  const right = left + W
-  const s = left * unit
-  const e = right * unit
-  const w = Math.max(e - s, 20)
+  const { msaAreaWidth } = model
+  const { s, w, polygonPoints } = getMinimapLayout(model)
   const fillColor = 'rgb(66, 119, 127)'
   const fillOpacity = 0.3
 
@@ -30,8 +17,8 @@ const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
       <rect
         x={0}
         y={0}
-        width={W}
-        height={BAR_HEIGHT}
+        width={msaAreaWidth}
+        height={MINIMAP_BAR_HEIGHT}
         stroke="#555"
         fill="none"
       />
@@ -39,16 +26,16 @@ const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
         x={Math.max(0, s)}
         y={0}
         width={w}
-        height={BAR_HEIGHT}
+        height={MINIMAP_BAR_HEIGHT}
         fill={fillColor}
         fillOpacity={fillOpacity}
         stroke="#555"
       />
-      <g transform={`translate(0 ${BAR_HEIGHT})`}>
+      <g transform={`translate(0 ${MINIMAP_BAR_HEIGHT})`}>
         <polygon
           fill={fillColor}
           fillOpacity={fillOpacity}
-          points={`${s + w},0 ${s},0 0,${H2} ${W},${H2}`}
+          points={polygonPoints}
         />
       </g>
     </>

package/src/components/minimap/minimapLayout.ts

@@ -0,0 +1,17 @@
+import type { MsaViewModel } from '../../model.ts'
+
+export const MINIMAP_BAR_HEIGHT = 12
+
+// viewport-rectangle and trapezoid geometry shared by the interactive Minimap
+// and the static MinimapSVG (used for SVG export)
+export function getMinimapLayout(model: MsaViewModel) {
+  const { scrollX, msaAreaWidth, minimapHeight, colWidth, numColumns } = model
+  const unit = msaAreaWidth / numColumns / colWidth
+  const left = -scrollX
+  const s = left * unit
+  const e = (left + msaAreaWidth) * unit
+  const w = Math.max(e - s, 20)
+  const polygonHeight = minimapHeight - MINIMAP_BAR_HEIGHT
+  const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${msaAreaWidth},${polygonHeight}`
+  return { unit, s, w, polygonHeight, polygonPoints }
+}

package/src/components/msa/MSACanvas.tsx

@@ -16,6 +16,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
     height,
     msaAreaWidth,
     blocks2d,
+    scrollZoom,
   } = model
   const ref = useRef<HTMLDivElement>(null)
   const onScrollX = useCallback(
@@ -30,10 +31,18 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
     },
     [model],
   )
+  const onZoom = useCallback(
+    (scaleFactor: number, offsetX: number, offsetY: number) => {
+      model.zoomToPos(scaleFactor, offsetX, offsetY)
+    },
+    [model],
+  )
   const { onMouseDown, onMouseUp } = useWheelScroll({
     ref,
     onScrollX,
     onScrollY,
+    onZoom,
+    scrollZoom,
   })
 
   return (

package/src/components/msa/MSACanvasBlock.tsx

@@ -97,7 +97,6 @@ const MSACanvasBlock = observer(function ({
         ref={ref}
         onMouseMove={event => {
           if (ref.current) {
-            setMousePosition({ x: event.clientX, y: event.clientY })
             const { col, row } = eventToColRow(
               event,
               ref.current,
@@ -117,6 +116,13 @@ const MSACanvasBlock = observer(function ({
             } else {
               model.setMousePos(undefined, undefined)
             }
+            // only track client coords when an insertion is hovered (the only
+            // consumer is the tooltip below); avoids a re-render on every move
+            setMousePosition(
+              model.hoveredInsertion
+                ? { x: event.clientX, y: event.clientY }
+                : undefined,
+            )
           }
         }}
         onClick={event => {

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -14,7 +14,8 @@ const MSAMouseoverCanvas = observer(function ({
   model: MsaViewModel
 }) {
   const ref = useRef<HTMLCanvasElement>(null)
-  const { height, msaAreaWidth, verticalScrollbarWidth } = model
+  const { height, msaAreaWidth, verticalScrollbarWidth, highResScaleFactor } =
+    model
   const width = msaAreaWidth - verticalScrollbarWidth
   useEffect(() => {
     const ctx = ref.current?.getContext('2d')
@@ -31,8 +32,8 @@ const MSAMouseoverCanvas = observer(function ({
     <canvas
       ref={ref}
       id="mouseover"
-      width={width}
-      height={height}
+      width={width * highResScaleFactor}
+      height={height * highResScaleFactor}
       style={{
         position: 'absolute',
         top: 0,

package/src/components/msa/renderMSABlock.ts

@@ -1,5 +1,6 @@
 import { getVisibleLeaves } from './getVisibleLeaves.ts'
 import { visibleColRange } from './visibleColRange.ts'
+import { setFontSize } from '../../setFontSize.ts'
 import { adjustColorForContrast } from '../../util.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -45,13 +46,7 @@ export function renderMSABlock({
   ctx.scale(k, k)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
-  // match an optional existing "bold " so re-renders don't accumulate it
-  // (an invalid "bold bold 16px" string would be silently ignored by canvas,
-  // freezing the font size against zoom changes)
-  ctx.font = ctx.font.replace(
-    /(?:bold )?\d+px/,
-    `${bgColor ? '' : 'bold '}${fontSize}px`,
-  )
+  setFontSize(ctx, fontSize, !bgColor)
 
   const { xStart, xEnd } = visibleColRange({
     offsetX,
@@ -127,6 +122,8 @@ function drawTilesAndText({
     rowHeight,
     relativeTo,
     showMsaLetters,
+    colClustalX,
+    colConsensus,
   } = model
 
   const isClustalX = colorSchemeName === 'clustalx_protein_dynamic'
@@ -158,9 +155,9 @@ function drawTilesAndText({
 
       let color: string | undefined
       if (isClustalX) {
-        color = model.colClustalX[xStart + j]![letter]
+        color = colClustalX[xStart + j]![letter]
       } else if (isPercentIdentity) {
-        const consensus = model.colConsensus[xStart + j]!
+        const consensus = colConsensus[xStart + j]!
         color = letter === consensus.letter ? consensus.color : undefined
       } else {
         color = colorScheme[letter]

package/src/components/msa/renderMSAMouseover.ts

@@ -27,10 +27,12 @@ export function renderMouseover({
     relativeTo,
     hoveredTreeNode,
     highlightedColumns,
+    highResScaleFactor,
   } = model
   const width = msaAreaWidth - verticalScrollbarWidth
   ctx.resetTransform()
-  ctx.clearRect(0, 0, width, height)
+  ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
+  ctx.scale(highResScaleFactor, highResScaleFactor)
 
   // Highlight reference row (relativeTo) persistently
   if (relativeTo) {

package/src/components/tracks/renderTracksSvg.ts

@@ -1,3 +1,4 @@
+import { setFontSize } from '../../setFontSize.ts'
 import { visibleColRange } from '../msa/visibleColRange.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -152,7 +153,7 @@ export function renderTextTrack({
   ctx.scale(k, k)
   ctx.translate(-offsetX, offsetY)
   ctx.textAlign = 'center'
-  ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
+  setFontSize(ctx, fontSize)
 
   drawTextTrackContent({
     ctx,

package/src/components/tree/renderTreeCanvas.ts

@@ -3,6 +3,7 @@ import {
   forEachDescendant,
   forEachLink,
 } from '../../hierarchy.ts'
+import { setFontSize } from '../../setFontSize.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
@@ -288,8 +289,7 @@ export function renderTreeCanvas({
   ctx.scale(k, k)
   ctx.translate(marginLeft, -offsetY)
 
-  const font = ctx.font
-  ctx.font = font.replace(/\d+px/, `${fontSize}px`)
+  setFontSize(ctx, fontSize)
 
   // memoized on the model and shared across the tree/bubble/label passes (and
   // across all tree blocks) rather than re-traversing the hierarchy in each

package/src/constants.ts

@@ -10,6 +10,14 @@ export const defaultHideGaps = true
 export const defaultAllowedGappyness = 100
 export const defaultSubFeatureRows = false
 export const defaultDrawMsaLetters = true
+export const defaultScrollZoom = false
+
+// Zoom limits, px per cell. maxCellSize caps both smooth zoom and the stepwise
+// zoom-in buttons (which otherwise grow unbounded). minColWidth/minRowHeight are
+// the smooth-zoom floors.
+export const minColWidth = 0.2
+export const minRowHeight = 1
+export const maxCellSize = 80
 
 // MSA model defaults
 export const defaultBgColor = true

package/src/flatToTree.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, test } from 'vitest'
+
+import { flatToTree } from './flatToTree.ts'
+
+describe('flatToTree', () => {
+  test('builds a tree from a flat parent list', () => {
+    const root = flatToTree([
+      { id: 0 },
+      { id: 1, parent: 0 },
+      { id: 2, parent: 0 },
+      { id: 3, parent: 1 },
+    ])
+    expect(root.id).toBe('0')
+    expect(root.children.map(c => c.id)).toEqual(['1', '2'])
+    expect(root.children[0]!.children.map(c => c.id)).toEqual(['3'])
+  })
+
+  test('throws on empty input rather than returning undefined', () => {
+    expect(() => flatToTree([])).toThrow(/no root/)
+  })
+
+  test('throws when every node has a parent (cycle) rather than returning undefined', () => {
+    expect(() =>
+      flatToTree([
+        { id: 0, parent: 1 },
+        { id: 1, parent: 0 },
+      ]),
+    ).toThrow(/no root/)
+  })
+})

package/src/flatToTree.ts

@@ -35,5 +35,14 @@ export function flatToTree(items: FlatItem[]): TreeNode {
     }
   }
 
-  return root!
+  if (root === undefined) {
+    // no node lacks a (resolvable) parent: empty input, or every node's parent
+    // points back into the set (a cycle). returning undefined here would crash
+    // cryptically downstream, so fail with a diagnosable message instead
+    throw new Error(
+      'could not build tree from flat node list: no root found (input was empty or contains a parent cycle)',
+    )
+  }
+
+  return root
 }

package/src/hierarchy.test.ts

@@ -1,9 +1,36 @@
 import { describe, expect, test } from 'vitest'
 
-import { collapse, find, hierarchy, leaves, sort, sum } from './hierarchy.ts'
+import {
+  calcDepthToLeaf,
+  collapse,
+  find,
+  findMaxBranchLen,
+  hierarchy,
+  leaves,
+  maxLength,
+  setBrLength,
+  sort,
+  sum,
+} from './hierarchy.ts'
 
 import type { NodeWithIds } from './types.ts'
 
+// Builds a fully unbalanced "caterpillar" tree of the given depth: each internal
+// node has one leaf child and one internal child. Recursion over this would blow
+// the call stack; the iterative traversals must handle it.
+function makeDeepTree(depth: number): NodeWithIds {
+  let node: NodeWithIds = { id: 'leaf0', name: 'leaf0', children: [] }
+  for (let i = 1; i <= depth; i++) {
+    node = {
+      id: `node${i}`,
+      name: `node${i}`,
+      length: 1,
+      children: [{ id: `leaf${i}`, name: `leaf${i}`, children: [] }, node],
+    }
+  }
+  return node
+}
+
 function makeTree(): NodeWithIds {
   return {
     id: 'root',
@@ -118,3 +145,28 @@ describe('sum', () => {
     expect(find(h, n => n.data.id === 'A')?.value).toBe(2)
   })
 })
+
+describe('deep (caterpillar) trees do not overflow the stack', () => {
+  const depth = 100_000
+
+  test('build, height, leaf count, and ordering', () => {
+    const h = hierarchy(makeDeepTree(depth), d => d.children)
+    expect(h.height).toBe(depth)
+    const l = leaves(h)
+    expect(l.length).toBe(depth + 1)
+    // each level contributes its own leafN before descending; deepest leaf last
+    expect(l[0]!.data.name).toBe(`leaf${depth}`)
+    expect(l.at(-1)!.data.name).toBe('leaf0')
+  })
+
+  test('accumulation helpers (sum, find, maxLength, setBrLength, depth)', () => {
+    const h = hierarchy(makeDeepTree(depth), d => d.children)
+    sum(h, d => (d.children.length > 0 ? 0 : 1))
+    expect(h.value).toBe(depth + 1)
+    expect(find(h, n => n.data.id === 'leaf0')?.data.name).toBe('leaf0')
+    expect(maxLength(h)).toBe(depth)
+    expect(calcDepthToLeaf(h)).toBe(depth)
+    setBrLength(h, 0, 1)
+    expect(findMaxBranchLen(h)).toBe(depth)
+  })
+})