react-msaview 5.2.0 → 5.2.1

package/dist/util.js

@@ -49,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":"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"}
+{"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.2.0";
+export declare const version = "5.2.1";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '5.2.0';
+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.2.0",
+  "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",
-    "msa-parsers": "5.2.0",
-    "@jbrowse/svgcanvas": "5.2.0"
+    "flatbush": "^4.6.1",
+    "@jbrowse/svgcanvas": "5.2.1",
+    "msa-parsers": "5.2.1"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/components/ConservationTrack.tsx

@@ -1,9 +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'
@@ -87,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 ? (

package/src/components/ResizeHandles.tsx

@@ -1,74 +1,49 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 
 import { observer } from 'mobx-react'
 
+import { useDragScroll } from '../useDragScroll.ts'
+
 import type { MsaViewModel } from '../model.ts'
 
+const handleBg = 'rgba(200,200,200)'
+const handleBgHover = 'rgba(150,150,150)'
+
 export const VerticalResizeHandle = observer(function ({
   model,
 }: {
   model: MsaViewModel
 }) {
   const { resizeHandleWidth } = model
-  const [mouseDragging, setMouseDragging] = useState(false)
-  const scheduled = useRef(false)
-  const prevX = useRef(0)
-
-  useEffect(() => {
-    function globalMouseMove(event: MouseEvent) {
-      event.preventDefault()
-      const currX = event.clientX
-      if (prevX.current === 0) {
-        prevX.current = event.clientX
-      } else {
-        const distance = currX - prevX.current
-        if (distance) {
-          // use rAF to make it so multiple event handlers aren't fired per-frame
-          // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-          if (!scheduled.current) {
-            scheduled.current = true
-            window.requestAnimationFrame(() => {
-              model.setTreeAreaWidth(model.treeAreaWidth + distance)
-              scheduled.current = false
-              prevX.current = event.clientX
-            })
-          }
-        }
-      }
-    }
-
-    function globalMouseUp() {
-      prevX.current = 0
-      if (mouseDragging) {
-        setMouseDragging(false)
-      }
-    }
-    if (mouseDragging) {
-      document.addEventListener('mousemove', globalMouseMove, true)
-      document.addEventListener('mouseup', globalMouseUp, true)
-      return () => {
-        document.removeEventListener('mousemove', globalMouseMove, true)
-        document.removeEventListener('mouseup', globalMouseUp, true)
-      }
-    }
-    return () => {}
-  }, [mouseDragging, model])
+  const [hovered, setHovered] = useState(false)
+  const { startDrag } = useDragScroll(
+    'x',
+    useCallback(
+      (delta: number, startWidth: number) => {
+        model.setTreeAreaWidth(startWidth + delta)
+      },
+      [model],
+    ),
+  )
 
   return (
-    <div>
-      <div
-        onMouseDown={() => {
-          setMouseDragging(true)
-        }}
-        style={{
-          cursor: 'ew-resize',
-          height: '100%',
-          width: resizeHandleWidth,
-          background: 'rgba(200,200,200)',
-          position: 'relative',
-        }}
-      />
-    </div>
+    <div
+      onMouseDown={event => {
+        startDrag(event, model.treeAreaWidth)
+      }}
+      onMouseEnter={() => {
+        setHovered(true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+      }}
+      style={{
+        cursor: 'ew-resize',
+        width: resizeHandleWidth,
+        background: hovered ? handleBgHover : handleBg,
+        position: 'relative',
+      }}
+    />
   )
 })
 
@@ -78,64 +53,77 @@ export const HorizontalResizeHandle = observer(function ({
   model: MsaViewModel
 }) {
   const { resizeHandleWidth } = model
-  const [mouseDragging, setMouseDragging] = useState(false)
-  const scheduled = useRef(false)
-  const prevY = useRef(0)
+  const [hovered, setHovered] = useState(false)
+  const { startDrag } = useDragScroll(
+    'y',
+    useCallback(
+      (delta: number, startHeight: number) => {
+        model.setHeight(startHeight + delta)
+      },
+      [model],
+    ),
+  )
 
-  useEffect(() => {
-    function globalMouseMove(event: MouseEvent) {
-      event.preventDefault()
-      const currY = event.clientY
-      if (prevY.current === 0) {
-        prevY.current = event.clientY
-      } else {
-        const distance = currY - prevY.current
-        if (distance) {
-          // use rAF to make it so multiple event handlers aren't fired per-frame
-          // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-          if (!scheduled.current) {
-            scheduled.current = true
-            window.requestAnimationFrame(() => {
-              model.setHeight(model.height + distance)
-              scheduled.current = false
-              prevY.current = event.clientY
-            })
-          }
-        }
-      }
-    }
+  return (
+    <div
+      onMouseDown={event => {
+        startDrag(event, model.height)
+      }}
+      onMouseEnter={() => {
+        setHovered(true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+      }}
+      style={{
+        cursor: 'ns-resize',
+        width: '100%',
+        height: resizeHandleWidth,
+        background: hovered ? handleBgHover : handleBg,
+        position: 'relative',
+      }}
+    />
+  )
+})
 
-    function globalMouseUp() {
-      prevY.current = 0
-      if (mouseDragging) {
-        setMouseDragging(false)
-      }
-    }
-    if (mouseDragging) {
-      document.addEventListener('mousemove', globalMouseMove, true)
-      document.addEventListener('mouseup', globalMouseUp, true)
-      return () => {
-        document.removeEventListener('mousemove', globalMouseMove, true)
-        document.removeEventListener('mouseup', globalMouseUp, true)
-      }
-    }
-    return () => {}
-  }, [mouseDragging, model])
+export const ConservationTrackResizeHandle = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { resizeHandleWidth } = model
+  const [hovered, setHovered] = useState(false)
+  const { startDrag } = useDragScroll(
+    'y',
+    useCallback(
+      (delta: number, startHeight: number) => {
+        model.setConservationTrackHeight(Math.max(10, startHeight + delta))
+      },
+      [model],
+    ),
+  )
 
   return (
-    <div>
-      <div
-        onMouseDown={() => {
-          setMouseDragging(true)
-        }}
-        style={{
-          cursor: 'ns-resize',
-          width: '100%',
-          height: resizeHandleWidth,
-          background: 'rgba(200,200,200)',
-          position: 'relative',
-        }}
-      />
-    </div>
+    <div
+      onMouseDown={event => {
+        startDrag(event, model.conservationTrackHeight)
+      }}
+      onMouseEnter={() => {
+        setHovered(true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+      }}
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        cursor: 'ns-resize',
+        width: '100%',
+        height: resizeHandleWidth,
+        zIndex: 1,
+        background: hovered ? handleBgHover : handleBg,
+      }}
+    />
   )
 })

package/src/components/TextTrack.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef } from 'react'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
+import { setFontSize } from '../setFontSize.ts'
 import { useColorContrast } from '../useColorContrast.ts'
 import { drawTextTrackContent } from './tracks/renderTracksSvg.ts'
 
@@ -51,7 +52,7 @@ const AnnotationBlock = observer(function ({
       ctx.clearRect(0, 0, blockSize, rowHeight)
       ctx.translate(-offsetX, 0)
       ctx.textAlign = 'center'
-      ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
+      setFontSize(ctx, fontSize)
 
       drawTextTrackContent({
         ctx,

package/src/components/Track.tsx

@@ -31,7 +31,7 @@ const TrackLabel = observer(function TrackLabel({
     model: { name, height },
   } = track
   const { classes } = useStyles()
-  const trackLabelHeight = Math.max(8, rowHeight - 8)
+  const trackLabelHeight = Math.min(height, Math.max(8, rowHeight - 8))
 
   return (
     <div

package/src/components/VerticalScrollbar.tsx

@@ -20,9 +20,9 @@ const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
     'y',
     useCallback(
       (delta: number, startScroll: number) => {
-        model.setScrollY(clamp(startScroll - delta / unit, -totalHeight, 0))
+        model.setScrollY(clamp(startScroll - delta / unit, model.maxScrollY, 0))
       },
-      [model, unit, totalHeight],
+      [model, unit],
     ),
   )
   return (

package/src/components/dialogs/UserProvidedDomainsDialog.tsx

@@ -112,10 +112,9 @@ const UserProvidedDomainsDialog = observer(function ({
                   ? JSON.parse(await file.text())
                   : await jsonfetch(interProURL)
 
-                model.setInterProAnnotations(
+                model.setDomains(
                   Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
                 )
-                model.setShowDomains(true)
                 getSession(model).notify(
                   'Loaded interproscan results',
                   'success',

package/src/components/header/ColorSchemeMenu.tsx

@@ -12,6 +12,7 @@ const ColorSchemeMenu = observer(function ({ model }: { model: MsaViewModel }) {
   const { colorSchemeName } = model
   return (
     <CascadingMenuButton
+      data-testid="color_scheme_menu"
       closeAfterItemClick
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}

package/src/components/header/FileMenu.tsx

@@ -19,6 +19,7 @@ const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog.tsx'))
 const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
   return (
     <CascadingMenuButton
+      data-testid="file_menu"
       menuItems={[
         {
           label: 'Return to import form',

package/src/components/header/HeaderInfoArea.tsx

@@ -7,22 +7,47 @@ import { makeStyles } from 'tss-react/mui'
 import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()({
-  margin: {
+  container: {
+    display: 'flex',
+    overflow: 'hidden',
     margin: 'auto',
     marginLeft: 10,
   },
+  nameFirst: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+  },
+  nameRest: {
+    whiteSpace: 'nowrap',
+    flexShrink: 0,
+  },
 })
 
 const HeaderInfoArea = observer(function ({ model }: { model: MsaViewModel }) {
   const { mouseOverRowName, mouseCol } = model
   const { classes } = useStyles()
-  return mouseOverRowName && mouseCol !== undefined ? (
-    <Typography className={classes.margin}>
-      {mouseOverRowName}:
-      {model.visibleColToSeqPosOneBased(mouseOverRowName, mouseCol)} (
-      {model.visibleColToRowLetter(mouseOverRowName, mouseCol)})
+  if (!mouseOverRowName || mouseCol === undefined) {
+    return null
+  }
+  const mid = Math.floor(mouseOverRowName.length / 2)
+  const pos = model.visibleColToSeqPosOneBased(mouseOverRowName, mouseCol)
+  const letter = model.visibleColToRowLetter(mouseOverRowName, mouseCol)
+  return (
+    <Typography
+      component="div"
+      className={classes.container}
+      title={mouseOverRowName}
+    >
+      <span className={classes.nameFirst}>
+        {mouseOverRowName.slice(0, mid)}
+      </span>
+      <span className={classes.nameRest}>
+        {mouseOverRowName.slice(mid)}:{pos} ({letter})
+      </span>
     </Typography>
-  ) : null
+  )
 })
 
 export default HeaderInfoArea

package/src/components/header/MSASettingsMenu.tsx

@@ -11,6 +11,7 @@ import type { MsaViewModel } from '../../model.ts'
 const MSASettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <CascadingMenuButton
+      data-testid="msa_settings_menu"
       closeAfterItemClick={false}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}

package/src/components/header/TreeSettingsMenu.tsx

@@ -16,6 +16,7 @@ const TreeSettingsMenu = observer(function ({
   const { rows } = model
   return (
     <CascadingMenuButton
+      data-testid="tree_settings_menu"
       closeAfterItemClick={false}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}

package/src/components/header/ZoomControls.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 
 import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomInMap from '@mui/icons-material/ZoomInMap'
 import ZoomOut from '@mui/icons-material/ZoomOut'
-import { IconButton } from '@mui/material'
+import { IconButton, ToggleButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -28,6 +29,18 @@ const ZoomControls = observer(function ZoomControls({
       >
         <ZoomOut />
       </IconButton>
+      <ToggleButton
+        value="scrollZoom"
+        selected={model.scrollZoom}
+        title="Toggle scroll-to-zoom (zoom on plain mouse wheel; ctrl+wheel always zooms)"
+        size="small"
+        sx={{ border: 'none' }}
+        onChange={() => {
+          model.setScrollZoom(!model.scrollZoom)
+        }}
+      >
+        <ZoomInMap />
+      </ToggleButton>
     </>
   )
 })