react-msaview 5.2.0 → 5.3.0

package/src/parseAsn1.test.ts

@@ -12,3 +12,9 @@ const r = readFileSync(
 test('real data file', () => {
   expect(parseAsn1(r)).toMatchSnapshot()
 })
+
+test('throws a clear error on input missing required sections', () => {
+  expect(() => parseAsn1('BioTreeContainer ::= { something {} }')).toThrow(
+    /missing/,
+  )
+})

package/src/parseAsn1.ts

@@ -88,15 +88,23 @@ export function parseAsn1(
     .replace(/^.*?::=/, '')
 
   const sections = extractSections(normalized)
+  const { fdict, nodes } = sections
+  if (fdict === undefined || nodes === undefined) {
+    // a truncated/malformed BioTreeContainer would otherwise pass undefined to
+    // extractBracedBlocks and crash cryptically; fail with a clear message
+    throw new Error(
+      `invalid BioTreeContainer ASN.1: missing '${fdict === undefined ? 'fdict' : 'nodes'}' section`,
+    )
+  }
 
   const dict = Object.fromEntries(
-    extractBracedBlocks(sections.fdict!).flatMap(block => {
+    extractBracedBlocks(fdict).flatMap(block => {
       const entry = parseDictEntry(block)
       return entry ? [[entry.id, remap[entry.name] || entry.name]] : []
     }),
   )
 
-  return extractBracedBlocks(sections.nodes!).flatMap(block => {
+  return extractBracedBlocks(nodes).flatMap(block => {
     const node = parseNode(block)
     if (!node) {
       return []
@@ -108,7 +116,7 @@ export function parseAsn1(
         ...Object.fromEntries(
           features.map(f => [dict[f.featureid], f.value] as const),
         ),
-      },
+      } as { id: number; parent: number; name: string },
     ]
   })
 }

package/src/renderToSvg.tsx

@@ -22,10 +22,20 @@ export interface ExportSvgOptions {
   exportType: 'entire' | 'viewport'
 }
 export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
-  await when(() => !!model.dataInitialized)
-  const { width, height, scrollX, scrollY, totalTrackAreaHeight } = model
-  const { exportType, theme, includeMinimap, includeTracks } = opts
+  await when(() => model.dataInitialized)
+  const {
+    width,
+    height,
+    scrollX,
+    scrollY,
+    totalTrackAreaHeight,
+    minimapHeight,
+  } = model
+  const { exportType, theme, includeTracks } = opts
   const trackHeight = includeTracks ? totalTrackAreaHeight : 0
+  // the minimap reflects the live viewport scroll position, so it's only
+  // meaningful for a viewport export, never for the entire alignment
+  const includeMinimap = exportType === 'viewport' && !!opts.includeMinimap
 
   if (exportType === 'entire') {
     return render({
@@ -43,7 +53,7 @@ export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
   }
   return render({
     width,
-    height: height + (includeMinimap ? model.minimapHeight : 0) + trackHeight,
+    height: height + (includeMinimap ? minimapHeight : 0) + trackHeight,
     contentHeight: height,
     trackHeight,
     theme,
@@ -79,37 +89,48 @@ async function render({
   includeTracks?: boolean
 }) {
   const { Context } = await import('@jbrowse/svgcanvas')
-  const Wrapper = includeMinimap ? MinimapWrapper : NullWrapper
+  const { treeAreaWidth, minimapHeight } = model
+
+  const content = (
+    <>
+      {includeTracks && trackHeight > 0 ? (
+        <TrackRendering
+          Context={Context}
+          model={model}
+          theme={theme}
+          offsetX={offsetX}
+          msaAreaWidth={width - treeAreaWidth}
+          trackHeight={trackHeight}
+        />
+      ) : null}
+      <g
+        transform={trackHeight > 0 ? `translate(0 ${trackHeight})` : undefined}
+      >
+        <CoreRendering
+          Context={Context}
+          model={model}
+          theme={theme}
+          offsetX={offsetX}
+          offsetY={offsetY}
+          msaAreaWidth={width - treeAreaWidth}
+          contentHeight={contentHeight}
+        />
+      </g>
+    </>
+  )
 
   return renderToStaticMarkup(
     <SvgWrapper width={width} height={height}>
-      <Wrapper model={model}>
-        {includeTracks && trackHeight > 0 ? (
-          <TrackRendering
-            Context={Context}
-            model={model}
-            theme={theme}
-            offsetX={offsetX}
-            msaAreaWidth={width - model.treeAreaWidth}
-            trackHeight={trackHeight}
-          />
-        ) : null}
-        <g
-          transform={
-            trackHeight > 0 ? `translate(0 ${trackHeight})` : undefined
-          }
-        >
-          <CoreRendering
-            Context={Context}
-            model={model}
-            theme={theme}
-            offsetX={offsetX}
-            offsetY={offsetY}
-            msaAreaWidth={width - model.treeAreaWidth}
-            contentHeight={contentHeight}
-          />
-        </g>
-      </Wrapper>
+      {includeMinimap ? (
+        <>
+          <g transform={`translate(${treeAreaWidth} 0)`}>
+            <MinimapSVG model={model} />
+          </g>
+          <g transform={`translate(0 ${minimapHeight})`}>{content}</g>
+        </>
+      ) : (
+        content
+      )}
     </SvgWrapper>,
   )
 }
@@ -176,19 +197,36 @@ function CoreRendering({
         </clipPath>
       </defs>
 
-      <g
-        clipPath={`url(#${clipId1})`}
-        dangerouslySetInnerHTML={{ __html: ctx1.getSvg().innerHTML }}
-      />
-      <g
-        clipPath={`url(#${clipId2})`}
+      <ClipGroup clipId={clipId1} html={ctx1.getSvg().innerHTML} />
+      <ClipGroup
+        clipId={clipId2}
         transform={`translate(${treeAreaWidth} 0)`}
-        dangerouslySetInnerHTML={{ __html: ctx2.getSvg().innerHTML }}
+        html={ctx2.getSvg().innerHTML}
       />
     </>
   )
 }
 
+// Wraps SVG markup produced by a svgcanvas Context in a clipped group. The
+// markup is injected verbatim since it's already serialized SVG, not React.
+function ClipGroup({
+  clipId,
+  html,
+  transform,
+}: {
+  clipId: string
+  html: string
+  transform?: string
+}) {
+  return (
+    <g
+      clipPath={`url(#${clipId})`}
+      transform={transform}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
+
 function TrackRendering({
   model,
   theme,
@@ -226,34 +264,11 @@ function TrackRendering({
           <rect x={0} y={0} width={msaAreaWidth} height={trackHeight} />
         </clipPath>
       </defs>
-      <g
-        clipPath={`url(#${clipId})`}
-        dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }}
-      />
+      <ClipGroup clipId={clipId} html={ctx.getSvg().innerHTML} />
     </g>
   )
 }
 
-function MinimapWrapper({
-  model,
-  children,
-}: {
-  model: MsaViewModel
-  children: React.ReactNode
-}) {
-  const { minimapHeight, treeAreaWidth } = model
-
-  return (
-    <>
-      <g transform={`translate(${treeAreaWidth} 0)`}>
-        <MinimapSVG model={model} />
-      </g>
-
-      <g transform={`translate(0 ${minimapHeight})`}>{children}</g>
-    </>
-  )
-}
-
 function SvgWrapper({
   width,
   height,
@@ -271,11 +286,8 @@ function SvgWrapper({
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox={`0 0 ${width} ${height}`}
     >
+      <rect width="100%" height="100%" fill="white" />
       {children}
     </svg>
   )
 }
-
-function NullWrapper({ children }: { children: React.ReactNode }) {
-  return children
-}

package/src/setFontSize.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, test } from 'vitest'
+
+import { setFontSize } from './setFontSize.ts'
+
+describe('setFontSize', () => {
+  test('replaces integer size, preserving family', () => {
+    const ctx = { font: '10px sans-serif' }
+    setFontSize(ctx, 16)
+    expect(ctx.font).toBe('16px sans-serif')
+  })
+
+  test('handles fractional sizes from smooth zoom', () => {
+    // regression: \d+ alone matched "8604" inside "14.8604px" and produced an
+    // invalid string like "14 0.18px sans-serif", silently breaking fillText
+    const ctx = { font: '14.8604px sans-serif' }
+    setFontSize(ctx, 16.9372)
+    expect(ctx.font).toBe('16.9372px sans-serif')
+  })
+
+  test('does not accumulate "bold " across re-renders', () => {
+    const ctx = { font: '10px sans-serif' }
+    setFontSize(ctx, 12, true)
+    expect(ctx.font).toBe('bold 12px sans-serif')
+    setFontSize(ctx, 14, true)
+    expect(ctx.font).toBe('bold 14px sans-serif')
+  })
+
+  test('drops "bold " when bold goes false', () => {
+    const ctx = { font: 'bold 12px sans-serif' }
+    setFontSize(ctx, 14)
+    expect(ctx.font).toBe('14px sans-serif')
+  })
+})

package/src/setFontSize.ts

@@ -0,0 +1,20 @@
+// Replace just the px size token in a canvas font string, preserving the
+// family (and optionally toggling bold). Accepts anything with a `font` field,
+// so it works for both a real CanvasRenderingContext2D and the svgcanvas
+// export context.
+//
+// [\d.]+ is load-bearing: it matches fractional sizes produced by smooth zoom.
+// \d+ alone matches only the fraction ("8604" in "14.8604px"), splicing the new
+// size into the middle to make an invalid string like "14 0.18px sans-serif" —
+// which canvas silently rejects, freezing the font and making fillText draw
+// nothing while fillRect still works.
+export function setFontSize(
+  ctx: { font: string },
+  fontSize: number,
+  bold = false,
+) {
+  ctx.font = ctx.font.replace(
+    /(?:bold )?[\d.]+px/,
+    `${bold ? 'bold ' : ''}${fontSize}px`,
+  )
+}

package/src/useDevicePixelRatio.ts

@@ -0,0 +1,29 @@
+import { useSyncExternalStore } from 'react'
+
+// Subscribes to devicePixelRatio changes (moving the window between monitors,
+// browser zoom). The matchMedia query is pinned to the current ratio, so on each
+// change we re-register against the new ratio to keep tracking subsequent moves.
+function subscribe(callback: () => void) {
+  if (typeof window === 'undefined') {
+    return () => {}
+  }
+  let mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
+  function onChange() {
+    callback()
+    mql.removeEventListener('change', onChange)
+    mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
+    mql.addEventListener('change', onChange)
+  }
+  mql.addEventListener('change', onChange)
+  return () => {
+    mql.removeEventListener('change', onChange)
+  }
+}
+
+function getSnapshot() {
+  return typeof window === 'undefined' ? 1 : window.devicePixelRatio
+}
+
+export function useDevicePixelRatio() {
+  return useSyncExternalStore(subscribe, getSnapshot, () => 1)
+}

package/src/useWheelScroll.ts

@@ -1,17 +1,33 @@
 import { useEffect, useRef, useState } from 'react'
 
+import {
+  SCROLL_ZOOM_DIVISOR,
+  getZoomNormalizer,
+  normalizeWheelDelta,
+  zoomFactorFromAccum,
+} from './wheelZoom.ts'
+
 export function useWheelScroll({
   ref,
   onScrollX,
   onScrollY,
+  onZoom,
+  scrollZoom,
 }: {
   ref: React.RefObject<HTMLDivElement | null>
   onScrollX?: (delta: number) => void
   onScrollY?: (delta: number) => void
+  onZoom?: (scaleFactor: number, offsetX: number, offsetY: number) => void
+  scrollZoom?: boolean
 }) {
   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<number | null>(null)
   const prevX = useRef(0)
   const prevY = useRef(0)
   const [mouseDragging, setMouseDragging] = useState(false)
@@ -22,35 +38,77 @@ export function useWheelScroll({
       return
     }
     function onWheel(event: WheelEvent) {
-      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
       }
+      // 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
-        })
+        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) {

package/src/util.ts

@@ -64,6 +64,41 @@ export function skipBlanks(blanks: number[], str: string) {
   return chunks.join('')
 }
 
+export function computeRowInsertions(blanks: number[], seq: string) {
+  const insertions: { pos: number; letters: string }[] = []
+  const blanksLen = blanks.length
+  let displayPos = 0
+  let blankIdx = 0
+  let currentInsertPos = -1
+  let letterChars: string[] = []
+  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: { end: number; start: number }) {
   return a.end - a.start
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.2.0'
+export const version = '5.3.0'

package/src/webpack.ts

@@ -5,5 +5,4 @@ export { type MsaViewModel, default as MSAModelF } from './model.ts'
 
 export * from 'react-dom/client'
 
-// eslint-disable-next-line unicorn/prefer-export-from
 export { React }

package/src/wheelZoom.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest'
+
+import {
+  getZoomNormalizer,
+  normalizeWheelDelta,
+  zoomFactorFromAccum,
+} from './wheelZoom.ts'
+
+describe('normalizeWheelDelta', () => {
+  test('pixel mode passes through', () => {
+    expect(normalizeWheelDelta(120, 0)).toBe(120)
+  })
+  test('line mode scales to pixels', () => {
+    expect(normalizeWheelDelta(3, 1)).toBe(48)
+  })
+  test('page mode scales to pixels', () => {
+    expect(normalizeWheelDelta(2, 2)).toBe(200)
+  })
+})
+
+describe('getZoomNormalizer', () => {
+  test('tiny pinch deltas get the smallest divisor (largest step)', () => {
+    expect(getZoomNormalizer(3)).toBe(25)
+  })
+  test('large mouse notches get the largest divisor (finest step)', () => {
+    expect(getZoomNormalizer(200)).toBe(500)
+  })
+  test('medium deltas land in between', () => {
+    expect(getZoomNormalizer(50)).toBe(150)
+    expect(getZoomNormalizer(20)).toBe(75)
+  })
+})
+
+describe('zoomFactorFromAccum', () => {
+  test('negative accum zooms in (factor > 1)', () => {
+    expect(zoomFactorFromAccum(-0.1, 16.67)).toBeCloseTo(1.1)
+  })
+  test('positive accum zooms out (factor < 1)', () => {
+    expect(zoomFactorFromAccum(0.1, 16.67)).toBeCloseTo(1 / 1.1)
+  })
+  test('rate-limits a big burst to ~0.2 per frame', () => {
+    // a huge accumulated delta cannot zoom more than the per-frame cap
+    expect(zoomFactorFromAccum(99, 16.67)).toBeCloseTo(1 / 1.2, 2)
+    expect(zoomFactorFromAccum(-99, 16.67)).toBeCloseTo(1.2, 2)
+  })
+})

package/src/wheelZoom.ts

@@ -0,0 +1,47 @@
+// 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: number, mode: number) {
+  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: number) {
+  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: number, elapsedMs: number) {
+  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
+}