react-msaview 5.1.1 → 5.2.1

package/src/components/header/settingsMenuItems.ts

@@ -8,19 +8,25 @@ export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
       label: 'Draw letters',
       type: 'checkbox',
       checked: drawMsaLetters,
-      onClick: () => { model.setDrawMsaLetters(!drawMsaLetters) },
+      onClick: () => {
+        model.setDrawMsaLetters(!drawMsaLetters)
+      },
     },
     {
       label: 'Color letters instead of background of tiles',
       type: 'checkbox',
       checked: !bgColor,
-      onClick: () => { model.setBgColor(!bgColor) },
+      onClick: () => {
+        model.setBgColor(!bgColor)
+      },
     },
     {
       label: 'Enable hiding gappy columns?',
       type: 'checkbox',
       checked: hideGaps,
-      onClick: () => { model.setHideGaps(!hideGaps) },
+      onClick: () => {
+        model.setHideGaps(!hideGaps)
+      },
     },
   ]
 }
@@ -38,31 +44,41 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
       label: 'Show branch length',
       type: 'checkbox',
       checked: showBranchLen,
-      onClick: () => { model.setShowBranchLen(!showBranchLen) },
+      onClick: () => {
+        model.setShowBranchLen(!showBranchLen)
+      },
     },
     {
       label: 'Show tree',
       type: 'checkbox',
       checked: drawTree,
-      onClick: () => { model.setDrawTree(!drawTree) },
+      onClick: () => {
+        model.setDrawTree(!drawTree)
+      },
     },
     {
       label: 'Draw clickable bubbles on tree branches',
       type: 'checkbox',
       checked: drawNodeBubbles,
-      onClick: () => { model.setDrawNodeBubbles(!drawNodeBubbles) },
+      onClick: () => {
+        model.setDrawNodeBubbles(!drawNodeBubbles)
+      },
     },
     {
       label: 'Tree labels align right',
       type: 'checkbox',
       checked: labelsAlignRight,
-      onClick: () => { model.setLabelsAlignRight(!labelsAlignRight) },
+      onClick: () => {
+        model.setLabelsAlignRight(!labelsAlignRight)
+      },
     },
     {
       label: 'Draw labels',
       type: 'checkbox',
       checked: drawLabels,
-      onClick: () => { model.setDrawLabels(!drawLabels) },
+      onClick: () => {
+        model.setDrawLabels(!drawLabels)
+      },
     },
   ]
 }

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,15 +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],
-          ].toString()}
-        />
+        <polygon fill={fill} points={polygonPoints} />
       </svg>
     </div>
   )

package/src/components/minimap/MinimapSVG.tsx

@@ -2,25 +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 - 12
-
-  const unit = W / numColumns / colWidth
-  const left = -scrollX
-  const right = left + W
-  const s = left * unit
-  const e = right * unit
+  const { msaAreaWidth } = model
+  const { s, w, polygonPoints } = getMinimapLayout(model)
   const fillColor = 'rgb(66, 119, 127)'
   const fillOpacity = 0.3
 
@@ -29,30 +17,25 @@ 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"
       />
       <rect
         x={Math.max(0, s)}
         y={0}
-        width={e - s}
-        height={BAR_HEIGHT}
+        width={w}
+        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={[
-            [e, 0],
-            [s, 0],
-            [0, H2],
-            [W, H2],
-          ].toString()}
+          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/getVisibleLeaves.ts

@@ -0,0 +1,21 @@
+import type { MsaViewModel } from '../../model.ts'
+
+// The slice of leaves whose rows intersect a block of height blockSizeY at
+// vertical offset offsetY, padded by one row on each side.
+export function getVisibleLeaves({
+  model,
+  offsetY,
+  blockSizeY,
+}: {
+  model: MsaViewModel
+  offsetY: number
+  blockSizeY: number
+}) {
+  const { leaves, rowHeight } = model
+  const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
+  const yEnd = Math.max(
+    0,
+    Math.ceil((offsetY + blockSizeY + rowHeight) / rowHeight),
+  )
+  return leaves.slice(yStart, yEnd)
+}

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,6 +1,9 @@
+import { getVisibleLeaves } from './getVisibleLeaves.ts'
+
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { NodeWithIdsAndLength } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
 
 export function renderBoxFeatureCanvasBlock({
   model,
@@ -13,22 +16,19 @@ export function renderBoxFeatureCanvasBlock({
   offsetX: number
   offsetY: number
   model: MsaViewModel
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   highResScaleFactorOverride?: number
   blockSizeYOverride?: number
 }) {
-  const { leaves, blockSize, rowHeight, highResScaleFactor, showDomains } =
-    model
+  const { blockSize, rowHeight, highResScaleFactor, showDomains } = model
   if (showDomains) {
-    const k = highResScaleFactorOverride || highResScaleFactor
-    const by = blockSizeYOverride || blockSize
+    const k = highResScaleFactorOverride ?? highResScaleFactor
+    const by = blockSizeYOverride ?? blockSize
     ctx.resetTransform()
     ctx.scale(k, k)
     ctx.translate(-offsetX, rowHeight / 2 - offsetY)
 
-    const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
-    const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
-    const visibleLeaves = leaves.slice(yStart, yEnd)
+    const visibleLeaves = getVisibleLeaves({ model, offsetY, blockSizeY: by })
 
     drawTiles({
       model,
@@ -44,7 +44,7 @@ function drawTiles({
   visibleLeaves,
 }: {
   model: MsaViewModel
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
 }) {
   const {