react-msaview 5.1.1 → 5.2.1

package/dist/useWheelScroll.js

@@ -1,8 +1,14 @@
 import { useEffect, useRef, useState } from 'react';
-export function useWheelScroll({ ref, onScrollX, onScrollY, }) {
+import { SCROLL_ZOOM_DIVISOR, getZoomNormalizer, normalizeWheelDelta, zoomFactorFromAccum, } from "./wheelZoom.js";
+export function useWheelScroll({ ref, onScrollX, onScrollY, onZoom, scrollZoom, }) {
     const scheduled = useRef(false);
+    const zoomScheduled = useRef(false);
     const deltaX = useRef(0);
     const deltaY = useRef(0);
+    const zoomAccum = useRef(0);
+    const zoomX = useRef(0);
+    const zoomY = useRef(0);
+    const lastZoomTime = useRef(null);
     const prevX = useRef(0);
     const prevY = useRef(0);
     const [mouseDragging, setMouseDragging] = useState(false);
@@ -12,34 +18,70 @@ export function useWheelScroll({ ref, onScrollX, onScrollY, }) {
             return;
         }
         function onWheel(event) {
-            if (onScrollX) {
-                deltaX.current += event.deltaX;
-            }
-            if (onScrollY) {
-                deltaY.current += event.deltaY;
+            // ctrlKey is also set by trackpad pinch gestures on all platforms. when
+            // scrollZoom is on, a plain vertical-dominant wheel zooms too; holding
+            // shift is the escape hatch to pan instead.
+            const isCtrlZoom = event.ctrlKey || event.metaKey;
+            const isScrollZoom = scrollZoom &&
+                !event.shiftKey &&
+                Math.abs(event.deltaY) >= Math.abs(event.deltaX);
+            if (onZoom && (isCtrlZoom || isScrollZoom)) {
+                const rect = curr.getBoundingClientRect();
+                // normalize away deltaMode (line/page), then divide by an adaptive
+                // factor so fine pinches and coarse notches feel consistent
+                const dY = normalizeWheelDelta(event.deltaY, event.deltaMode);
+                const divisor = isCtrlZoom ? getZoomNormalizer(dY) : SCROLL_ZOOM_DIVISOR;
+                zoomAccum.current += dY / divisor;
+                zoomX.current = event.clientX - rect.left;
+                zoomY.current = event.clientY - rect.top;
+                if (!zoomScheduled.current) {
+                    zoomScheduled.current = true;
+                    requestAnimationFrame(now => {
+                        const elapsed = lastZoomTime.current === null ? 16.67 : now - lastZoomTime.current;
+                        lastZoomTime.current = now;
+                        onZoom(zoomFactorFromAccum(zoomAccum.current, Math.min(100, elapsed)), zoomX.current, zoomY.current);
+                        zoomAccum.current = 0;
+                        zoomScheduled.current = false;
+                    });
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                return;
             }
-            if (!scheduled.current) {
-                scheduled.current = true;
-                requestAnimationFrame(() => {
-                    if (onScrollX) {
-                        onScrollX(-deltaX.current);
-                        deltaX.current = 0;
-                    }
-                    if (onScrollY) {
-                        onScrollY(-deltaY.current);
-                        deltaY.current = 0;
-                    }
-                    scheduled.current = false;
-                });
+            // only swallow the wheel event on an axis we actually handle, otherwise a
+            // vertical wheel over an x-only scroller (e.g. a Track) blocks page scroll
+            const consumeX = !!onScrollX && event.deltaX !== 0;
+            const consumeY = !!onScrollY && event.deltaY !== 0;
+            if (consumeX || consumeY) {
+                if (onScrollX) {
+                    deltaX.current += event.deltaX;
+                }
+                if (onScrollY) {
+                    deltaY.current += event.deltaY;
+                }
+                if (!scheduled.current) {
+                    scheduled.current = true;
+                    requestAnimationFrame(() => {
+                        if (onScrollX) {
+                            onScrollX(-deltaX.current);
+                            deltaX.current = 0;
+                        }
+                        if (onScrollY) {
+                            onScrollY(-deltaY.current);
+                            deltaY.current = 0;
+                        }
+                        scheduled.current = false;
+                    });
+                }
+                event.preventDefault();
+                event.stopPropagation();
             }
-            event.preventDefault();
-            event.stopPropagation();
         }
         curr.addEventListener('wheel', onWheel, { passive: false });
         return () => {
             curr.removeEventListener('wheel', onWheel);
         };
-    }, [ref, onScrollX, onScrollY]);
+    }, [ref, onScrollX, onScrollY, onZoom, scrollZoom]);
     useEffect(() => {
         if (!mouseDragging) {
             return;

package/dist/useWheelScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWheelScroll.js","sourceRoot":"","sources":["../src/useWheelScroll.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useWheelScroll.js","sourceRoot":"","sources":["../src/useWheelScroll.ts"],"names":[],"mappings":"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"}

package/dist/util.d.ts

@@ -1,4 +1,5 @@
 import type { Theme } from '@mui/material';
+export declare function adjustColorForContrast(color: string, bg: string): string;
 export declare function transform<T>(obj: Record<string, T>, cb: (arg0: [string, T]) => [string, T]): {
     [k: string]: T;
 };
@@ -6,6 +7,10 @@ export declare function colorContrast(colorScheme: Record<string, string>, theme
     [k: string]: string;
 };
 export declare function skipBlanks(blanks: number[], str: string): string;
+export declare function computeRowInsertions(blanks: number[], seq: string): {
+    pos: number;
+    letters: string;
+}[];
 export declare function len(a: {
     end: number;
     start: number;

package/dist/util.js

@@ -1,6 +1,28 @@
 import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
 import namesPlugin from 'colord/plugins/names';
-extend([namesPlugin]);
+extend([namesPlugin, a11yPlugin]);
+const contrastAdjustCache = new Map();
+// Adjusts a background-tile color until it meets WCAG AA (4.5:1) contrast
+// against `bg`, so it can be used as letter text in letter-color mode.
+// Darkens on light backgrounds, lightens on dark backgrounds.
+export function adjustColorForContrast(color, bg) {
+    const cacheKey = `${color}|${bg}`;
+    const cached = contrastAdjustCache.get(cacheKey);
+    if (cached !== undefined) {
+        return cached;
+    }
+    let c = colord(color);
+    if (!c.isReadable(bg)) {
+        const bgIsDark = colord(bg).luminance() < 0.5;
+        for (let i = 0; i < 40 && !c.isReadable(bg); i++) {
+            c = bgIsDark ? c.lighten(0.05) : c.darken(0.05);
+        }
+    }
+    const result = c.toHex();
+    contrastAdjustCache.set(cacheKey, result);
+    return result;
+}
 export function transform(obj, cb) {
     return Object.fromEntries(Object.entries(obj).map(cb));
 }
@@ -27,6 +49,42 @@ export function skipBlanks(blanks, str) {
     }
     return chunks.join('');
 }
+export function computeRowInsertions(blanks, seq) {
+    const insertions = [];
+    const blanksLen = blanks.length;
+    let displayPos = 0;
+    let blankIdx = 0;
+    let currentInsertPos = -1;
+    let letterChars = [];
+    for (let i = 0; i < seq.length; i++) {
+        if (blankIdx < blanksLen && blanks[blankIdx] === i) {
+            // bit trick: (code - 45) >>> 0 <= 1 checks for '-' (45) or '.' (46)
+            if (!((seq.charCodeAt(i) - 45) >>> 0 <= 1)) {
+                if (currentInsertPos === displayPos) {
+                    letterChars.push(seq[i]);
+                }
+                else {
+                    if (letterChars.length > 0) {
+                        insertions.push({
+                            pos: currentInsertPos,
+                            letters: letterChars.join(''),
+                        });
+                    }
+                    currentInsertPos = displayPos;
+                    letterChars = [seq[i]];
+                }
+            }
+            blankIdx++;
+        }
+        else {
+            displayPos++;
+        }
+    }
+    if (letterChars.length > 0) {
+        insertions.push({ pos: currentInsertPos, letters: letterChars.join('') });
+    }
+    return insertions;
+}
 export function len(a) {
     return a.end - a.start;
 }

package/dist/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,WAAW,MAAM,sBAAsB,CAAA;AAI9C,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,CAAA;AAErB,MAAM,UAAU,SAAS,CACvB,GAAsB,EACtB,EAAsC;IAEtC,OAAO,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;AACxD,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,WAAmC,EACnC,KAAY;IAEZ,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QACjD,MAAM;QACN,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;KACrD,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,MAAgB,EAAE,GAAW;IACtD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,GAAG,CAAA;IACZ,CAAC;IACD,MAAM,MAAM,GAAG,EAAE,CAAA;IACjB,IAAI,OAAO,GAAG,CAAC,CAAA;IACf,KAAK,MAAM,QAAQ,IAAI,MAAM,EAAE,CAAC;QAC9B,IAAI,QAAQ,GAAG,OAAO,EAAE,CAAC;YACvB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;QAC3C,CAAC;QACD,OAAO,GAAG,QAAQ,GAAG,CAAC,CAAA;IACxB,CAAC;IACD,IAAI,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC;QACzB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAA;IACjC,CAAC;IACD,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,CAAiC;IACnD,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,KAAK,CAAA;AACxB,CAAC;AAED,8CAA8C;AAC9C,oCAAoC;AACpC,MAAM,UAAU,OAAO,CAAC,CAAU;IAChC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAA;AAC/B,CAAC"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "5.1.1";
+export declare const version = "5.2.1";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '5.1.1';
+export const version = '5.2.1';
 //# sourceMappingURL=version.js.map

package/dist/webpack.js

@@ -2,6 +2,5 @@ import * as React from 'react';
 export { default as MSAView } from "./components/Loading.js";
 export { default as MSAModelF } from "./model.js";
 export * from 'react-dom/client';
-// eslint-disable-next-line unicorn/prefer-export-from
 export { React };
 //# sourceMappingURL=webpack.js.map

package/dist/webpack.js.map

@@ -1 +1 @@
-{"version":3,"file":"webpack.js","sourceRoot":"","sources":["../src/webpack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,yBAA0B,CAAA;AAC7D,OAAO,EAAqB,OAAO,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEpE,cAAc,kBAAkB,CAAA;AAEhC,sDAAsD;AACtD,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"webpack.js","sourceRoot":"","sources":["../src/webpack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,yBAA0B,CAAA;AAC7D,OAAO,EAAqB,OAAO,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEpE,cAAc,kBAAkB,CAAA;AAEhC,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/wheelZoom.d.ts

@@ -0,0 +1,4 @@
+export declare const SCROLL_ZOOM_DIVISOR = 500;
+export declare function normalizeWheelDelta(delta: number, mode: number): number;
+export declare function getZoomNormalizer(deltaY: number): 500 | 25 | 150 | 75;
+export declare function zoomFactorFromAccum(zoomAccum: number, elapsedMs: number): number;

package/dist/wheelZoom.js

@@ -0,0 +1,43 @@
+// Wheel / trackpad-pinch delta handling, adapted from @jbrowse/core's
+// util/wheelZoom (not yet in our pinned @jbrowse/core). Turns raw wheel deltas
+// into a per-frame zoom factor that feels consistent across fine trackpad
+// pinches and coarse mouse notches.
+// Fixed divisor for plain-wheel scroll-zoom mode, where deltas are big notches.
+export const SCROLL_ZOOM_DIVISOR = 500;
+// Cap the zoom change per millisecond so a burst of momentum-scroll events
+// coalesced into one frame can't jump the zoom level (0.2 per ~60fps frame).
+const MAX_ZOOM_RATE_PER_MS = 0.2 / 16.67;
+// Convert a wheel delta to pixels regardless of the browser's deltaMode; some
+// browsers/mice report lines or pages instead of pixels.
+export function normalizeWheelDelta(delta, mode) {
+    if (mode === 1) {
+        return delta * 16; // DOM_DELTA_LINE
+    }
+    if (mode === 2) {
+        return delta * 100; // DOM_DELTA_PAGE
+    }
+    return delta; // DOM_DELTA_PIXEL
+}
+// Adaptive divisor: tiny pinch deltas zoom in larger steps, big mouse notches
+// in finer steps, so a trackpad pinch and a mouse wheel feel similar.
+export function getZoomNormalizer(deltaY) {
+    const abs = Math.abs(deltaY);
+    if (abs < 6) {
+        return 25;
+    }
+    if (abs > 150) {
+        return 500;
+    }
+    if (abs > 30) {
+        return 150;
+    }
+    return 75;
+}
+// Turn accumulated, normalized zoom intent into a colWidth/rowHeight multiplier.
+// Positive accum (wheel toward user) zooms out (factor < 1); negative zooms in.
+export function zoomFactorFromAccum(zoomAccum, elapsedMs) {
+    const max = MAX_ZOOM_RATE_PER_MS * elapsedMs;
+    const d = Math.max(-max, Math.min(max, zoomAccum));
+    return d > 0 ? 1 / (1 + d) : 1 - d;
+}
+//# sourceMappingURL=wheelZoom.js.map

package/dist/wheelZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheelZoom.js","sourceRoot":"","sources":["../src/wheelZoom.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,+EAA+E;AAC/E,0EAA0E;AAC1E,oCAAoC;AAEpC,gFAAgF;AAChF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;AAEtC,2EAA2E;AAC3E,6EAA6E;AAC7E,MAAM,oBAAoB,GAAG,GAAG,GAAG,KAAK,CAAA;AAExC,8EAA8E;AAC9E,yDAAyD;AACzD,MAAM,UAAU,mBAAmB,CAAC,KAAa,EAAE,IAAY;IAC7D,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;QACf,OAAO,KAAK,GAAG,EAAE,CAAA,CAAC,iBAAiB;IACrC,CAAC;IACD,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;QACf,OAAO,KAAK,GAAG,GAAG,CAAA,CAAC,iBAAiB;IACtC,CAAC;IACD,OAAO,KAAK,CAAA,CAAC,kBAAkB;AACjC,CAAC;AAED,8EAA8E;AAC9E,sEAAsE;AACtE,MAAM,UAAU,iBAAiB,CAAC,MAAc;IAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAC5B,IAAI,GAAG,GAAG,CAAC,EAAE,CAAC;QACZ,OAAO,EAAE,CAAA;IACX,CAAC;IACD,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;QACd,OAAO,GAAG,CAAA;IACZ,CAAC;IACD,IAAI,GAAG,GAAG,EAAE,EAAE,CAAC;QACb,OAAO,GAAG,CAAA;IACZ,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC;AAED,iFAAiF;AACjF,gFAAgF;AAChF,MAAM,UAAU,mBAAmB,CAAC,SAAiB,EAAE,SAAiB;IACtE,MAAM,GAAG,GAAG,oBAAoB,GAAG,SAAS,CAAA;IAC5C,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,CAAA;IAClD,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AACpC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "5.1.1",
+  "version": "5.2.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -35,15 +35,15 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@types/node": "^25.9.1"
+    "@types/node": "^25.9.2"
   },
   "dependencies": {
     "@mui/icons-material": "^7.3.11",
     "@mui/material": "^7.3.11",
     "colord": "^2.9.3",
-    "flatbush": "^4.5.1",
-    "@jbrowse/svgcanvas": "5.1.1",
-    "msa-parsers": "5.1.1"
+    "flatbush": "^4.6.1",
+    "@jbrowse/svgcanvas": "5.2.1",
+    "msa-parsers": "5.2.1"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/calculateBlocks.ts

@@ -1,58 +1,25 @@
-export function blocksY({
-  mapHeight,
+// Returns the block offsets (in pixels) needed to cover the viewport along one
+// axis. mapSize/viewportPos/viewportSize are all in pixels. The clamp pins the
+// block set to the content edge so an over-scroll past the end still fills the
+// viewport rather than leaving a gap.
+export function calculateBlocks({
+  mapSize,
   blockSize,
-  viewportY,
-  viewportHeight,
+  viewportPos,
+  viewportSize,
 }: {
-  mapHeight: number
+  mapSize: number
   blockSize: number
-  viewportY: number
-  viewportHeight: number
+  viewportPos: number
+  viewportSize: number
 }) {
-  const clampedViewportY = Math.max(
-    0,
-    Math.min(viewportY, mapHeight * blockSize - viewportHeight),
-  )
+  const clamped = Math.max(0, Math.min(viewportPos, mapSize - viewportSize))
+  const minTile = Math.floor(clamped / blockSize)
+  const maxTile = Math.floor((clamped + viewportSize - 1) / blockSize)
 
-  // Calculate visible tile ranges
-  const minTileY = Math.floor(clampedViewportY / blockSize)
-  const maxTileY = Math.floor(
-    (clampedViewportY + viewportHeight - 1) / blockSize,
-  )
-
-  // Generate list of visible tiles
-  const blocksY = []
-  for (let tileY = minTileY; tileY <= maxTileY; tileY++) {
-    blocksY.push(tileY * blockSize)
+  const blocks = []
+  for (let tile = minTile; tile <= maxTile; tile++) {
+    blocks.push(tile * blockSize)
   }
-
-  return blocksY
-}
-
-export function blocksX({
-  mapWidth,
-  blockSize,
-  viewportX,
-  viewportWidth,
-}: {
-  mapWidth: number
-  blockSize: number
-  viewportX: number
-  viewportWidth: number
-}) {
-  const clampedViewportX = Math.max(
-    0,
-    Math.min(viewportX, mapWidth - viewportWidth),
-  )
-
-  const minTileX = Math.floor(clampedViewportX / blockSize)
-  const maxTileX = Math.floor(
-    (clampedViewportX + viewportWidth - 1) / blockSize,
-  )
-  const blocksX = []
-  for (let tileX = minTileX; tileX <= maxTileX; tileX++) {
-    blocksX.push(tileX * blockSize)
-  }
-
-  return blocksX
+  return blocks
 }

package/src/components/ConservationTrack.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef } from 'react'
 
-import { ResizeHandle } from '@jbrowse/core/ui'
+import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
+import { ConservationTrackResizeHandle } from './ResizeHandles.tsx'
 import { drawConservationBars } from './tracks/renderTracksSvg.ts'
 
 import type { MsaViewModel } from '../model.ts'
@@ -17,42 +18,32 @@ const ConservationBlock = observer(function ({
   offsetX: number
   trackHeight: number
 }) {
-  const { blockSize, scrollX, colWidth, highResScaleFactor, conservation } =
-    model
+  const { blockSize, scrollX, highResScaleFactor } = model
 
   const ref = useRef<HTMLCanvasElement>(null)
 
   useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    const ctx = ref.current.getContext('2d')
+    const ctx = ref.current?.getContext('2d')
     if (!ctx) {
       return
     }
+    return autorun(() => {
+      const { blockSize, colWidth, highResScaleFactor, conservation } = model
+      ctx.resetTransform()
+      ctx.scale(highResScaleFactor, highResScaleFactor)
+      ctx.clearRect(0, 0, blockSize, trackHeight)
+      ctx.translate(-offsetX, 0)
 
-    ctx.resetTransform()
-    ctx.scale(highResScaleFactor, highResScaleFactor)
-    ctx.clearRect(0, 0, blockSize, trackHeight)
-    ctx.translate(-offsetX, 0)
-
-    drawConservationBars({
-      ctx,
-      conservation,
-      colWidth,
-      trackHeight,
-      offsetX,
-      blockSize,
+      drawConservationBars({
+        ctx,
+        conservation,
+        colWidth,
+        trackHeight,
+        offsetX,
+        blockSize,
+      })
     })
-  }, [
-    blockSize,
-    colWidth,
-    trackHeight,
-    offsetX,
-    highResScaleFactor,
-    conservation,
-  ])
+  }, [model, offsetX, trackHeight])
 
   return (
     <canvas
@@ -96,23 +87,7 @@ const ConservationTrack = observer(function ({
           trackHeight={trackHeight}
         />
       ))}
-      <ResizeHandle
-        onDrag={delta => {
-          model.setConservationTrackHeight(
-            Math.max(10, model.conservationTrackHeight + delta),
-          )
-          return delta
-        }}
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          height: 4,
-          width: '100%',
-          zIndex: 1,
-          background: 'rgba(200,200,200,0.5)',
-        }}
-      />
+      <ConservationTrackResizeHandle model={model} />
     </div>
   )
 })

package/src/components/MSAView.tsx

@@ -1,7 +1,8 @@
-import React, { Suspense } from 'react'
+import React, { Suspense, useEffect } from 'react'
 
 import { observer } from 'mobx-react'
 
+import { useDevicePixelRatio } from '../useDevicePixelRatio.ts'
 import {
   HorizontalResizeHandle,
   VerticalResizeHandle,
@@ -128,6 +129,14 @@ const View = observer(function ({ model }: { model: MsaViewModel }) {
 
 const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
   const { height, viewInitialized, DialogComponent, DialogProps } = model
+
+  // mirror the live device pixel ratio into the model so canvas backing stores
+  // re-scale when the window moves between monitors or the browser zooms
+  const devicePixelRatio = useDevicePixelRatio()
+  useEffect(() => {
+    model.setHighResScaleFactor(devicePixelRatio)
+  }, [model, devicePixelRatio])
+
   return (
     <div>
       {viewInitialized ? (