react-msaview 5.1.1 → 5.2.1

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

@@ -19,13 +19,23 @@ export interface ExportSvgOptions {
   theme: Theme
   includeMinimap?: boolean
   includeTracks?: boolean
-  exportType: string
+  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({
@@ -41,21 +51,18 @@ export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
       includeTracks,
     })
   }
-  if (exportType === 'viewport') {
-    return render({
-      width,
-      height: height + (includeMinimap ? model.minimapHeight : 0) + trackHeight,
-      contentHeight: height,
-      trackHeight,
-      theme,
-      model,
-      offsetY: -scrollY,
-      offsetX: -scrollX,
-      includeMinimap,
-      includeTracks,
-    })
-  }
-  throw new Error('unknown export type')
+  return render({
+    width,
+    height: height + (includeMinimap ? minimapHeight : 0) + trackHeight,
+    contentHeight: height,
+    trackHeight,
+    theme,
+    model,
+    offsetY: -scrollY,
+    offsetX: -scrollX,
+    includeMinimap,
+    includeTracks,
+  })
 }
 
 async function render({
@@ -82,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}
-            width={width}
-            trackHeight={trackHeight}
-          />
-        ) : null}
-        <g
-          transform={
-            trackHeight > 0 ? `translate(0 ${trackHeight})` : undefined
-          }
-        >
-          <CoreRendering
-            Context={Context}
-            model={model}
-            theme={theme}
-            offsetX={offsetX}
-            offsetY={offsetY}
-            width={width}
-            contentHeight={contentHeight}
-          />
-        </g>
-      </Wrapper>
+      {includeMinimap ? (
+        <>
+          <g transform={`translate(${treeAreaWidth} 0)`}>
+            <MinimapSVG model={model} />
+          </g>
+          <g transform={`translate(0 ${minimapHeight})`}>{content}</g>
+        </>
+      ) : (
+        content
+      )}
     </SvgWrapper>,
   )
 }
@@ -120,7 +138,7 @@ async function render({
 function CoreRendering({
   model,
   theme,
-  width,
+  msaAreaWidth,
   contentHeight,
   offsetX,
   offsetY,
@@ -128,7 +146,7 @@ function CoreRendering({
 }: {
   model: MsaViewModel
   theme: Theme
-  width: number
+  msaAreaWidth: number
   contentHeight: number
   offsetX: number
   offsetY: number
@@ -139,9 +157,8 @@ function CoreRendering({
   const clipId2 = `msa-${id}`
   const contrastScheme = colorContrast(colorScheme, theme)
 
-  const ctx1 = new Context(width, contentHeight) as any
-
-  const ctx2 = new Context(width, contentHeight) as any
+  const ctx1 = new Context(treeAreaWidth, contentHeight)
+  const ctx2 = new Context(msaAreaWidth, contentHeight)
   renderBoxFeatureCanvasBlock({
     ctx: ctx2,
     offsetX,
@@ -150,7 +167,6 @@ function CoreRendering({
     blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })
-  const msaAreaWidth = width - treeAreaWidth
   renderTreeCanvas({
     model,
     offsetY,
@@ -176,37 +192,52 @@ function CoreRendering({
         <clipPath id={clipId1}>
           <rect x={0} y={0} width={treeAreaWidth} height={contentHeight} />
         </clipPath>
-      </defs>
-      <defs>
         <clipPath id={clipId2}>
           <rect x={0} y={0} width={msaAreaWidth} height={contentHeight} />
         </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,
-  width,
+  msaAreaWidth,
   trackHeight,
   offsetX,
   Context,
 }: {
   model: MsaViewModel
   theme: Theme
-  width: number
+  msaAreaWidth: number
   trackHeight: number
   offsetX: number
   Context: typeof ContextType
@@ -214,9 +245,8 @@ function TrackRendering({
   const { treeAreaWidth, colorScheme, id } = model
   const clipId = `tracks-${id}`
   const contrastScheme = colorContrast(colorScheme, theme)
-  const msaAreaWidth = width - treeAreaWidth
 
-  const ctx = new Context(msaAreaWidth, trackHeight) as any
+  const ctx = new Context(msaAreaWidth, trackHeight)
 
   renderAllTracks({
     model,
@@ -234,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,
@@ -277,13 +284,10 @@ function SvgWrapper({
       height={height}
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox={[0, 0, width, height].toString()}
+      viewBox={`0 0 ${width} ${height}`}
     >
+      <rect width="100%" height="100%" fill="white" />
       {children}
     </svg>
   )
 }
-
-function NullWrapper({ children }: { children: React.ReactNode }) {
-  return children
-}

package/src/rowCoordinateCalculations.test.ts

@@ -1,7 +1,6 @@
 import { expect, test } from 'vitest'
 
 import {
-  globalColToSeqPos,
   globalColToVisibleCol,
   visibleColToGlobalCol,
   visibleColToSeqPos,
@@ -126,56 +125,6 @@ test('globalColToVisibleCol with consecutive blanks', () => {
   expect(globalColToVisibleCol(blanks, 10)).toBe(5)
 })
 
-// Tests for globalColToSeqPos (global column → sequence position)
-test('globalColToSeqPos with gaps in sequence', () => {
-  const sequence = 'AC-GT-A'
-  expect(globalColToSeqPos(sequence, 0)).toBe(0)
-  expect(globalColToSeqPos(sequence, 1)).toBe(1)
-  expect(globalColToSeqPos(sequence, 2)).toBe(2)
-  // Position 2 is a gap, so count before it is 2
-  expect(globalColToSeqPos(sequence, 3)).toBe(2)
-  expect(globalColToSeqPos(sequence, 4)).toBe(3)
-  expect(globalColToSeqPos(sequence, 5)).toBe(4)
-  // Position 5 is a gap, so count before it is 4
-  expect(globalColToSeqPos(sequence, 6)).toBe(4)
-})
-
-test('globalColToSeqPos with mixed gap characters (- and .)', () => {
-  const sequence = 'AC.GT-A'
-  expect(globalColToSeqPos(sequence, 0)).toBe(0)
-  expect(globalColToSeqPos(sequence, 1)).toBe(1)
-  // Position 2 is a gap (.), so count before it is 2
-  expect(globalColToSeqPos(sequence, 2)).toBe(2)
-  expect(globalColToSeqPos(sequence, 3)).toBe(2)
-  expect(globalColToSeqPos(sequence, 4)).toBe(3)
-  // Position 5 is a gap (-), so count before it is 4
-  expect(globalColToSeqPos(sequence, 5)).toBe(4)
-  expect(globalColToSeqPos(sequence, 6)).toBe(4)
-})
-
-test('globalColToSeqPos with no gaps in sequence', () => {
-  const sequence = 'ACGTA'
-  expect(globalColToSeqPos(sequence, 0)).toBe(0)
-  expect(globalColToSeqPos(sequence, 1)).toBe(1)
-  expect(globalColToSeqPos(sequence, 2)).toBe(2)
-  expect(globalColToSeqPos(sequence, 3)).toBe(3)
-  expect(globalColToSeqPos(sequence, 4)).toBe(4)
-})
-
-test('globalColToSeqPos with all gaps in sequence', () => {
-  const sequence = '-----'
-  expect(globalColToSeqPos(sequence, 0)).toBe(0)
-  expect(globalColToSeqPos(sequence, 1)).toBe(0)
-  expect(globalColToSeqPos(sequence, 2)).toBe(0)
-  expect(globalColToSeqPos(sequence, 3)).toBe(0)
-  expect(globalColToSeqPos(sequence, 4)).toBe(0)
-})
-
-test('globalColToSeqPos with position exceeding sequence length', () => {
-  const sequence = 'AC-GT'
-  expect(globalColToSeqPos(sequence, 10)).toBe(4)
-})
-
 // Tests for visibleColToSeqPos (visible column → sequence position)
 test('visibleColToSeqPos returns sequence position or undefined for gaps', () => {
   const seq = 'AC--GT--CT'

package/src/rowCoordinateCalculations.ts

@@ -88,29 +88,6 @@ export function globalColToVisibleCol(
   return globalCol - blanksBefore
 }
 
-/**
- * Convert a global column index to a row-specific sequence position.
- * This counts non-gap characters up to the given global column.
- *
- * @param seq - The row's sequence string (including gaps)
- * @param globalCol - The global column index
- * @returns The sequence position (count of non-gap characters before this column)
- */
-export function globalColToSeqPos(seq: string, globalCol: number) {
-  let seqPos = 0
-  let currentCol = 0
-  const seqLen = seq.length
-
-  while (currentCol < globalCol && currentCol < seqLen) {
-    if (!isBlank(seq[currentCol])) {
-      seqPos++
-    }
-    currentCol++
-  }
-
-  return seqPos
-}
-
 /**
  * Convert a visible column to a row-specific sequence position.
  * Returns undefined if the position is a gap in the sequence.

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) {