react-msaview 5.1.1 → 5.2.1

package/src/util.ts

@@ -1,9 +1,33 @@
 import { colord, extend } from 'colord'
+import a11yPlugin from 'colord/plugins/a11y'
 import namesPlugin from 'colord/plugins/names'
 
 import type { Theme } from '@mui/material'
 
-extend([namesPlugin])
+extend([namesPlugin, a11yPlugin])
+
+const contrastAdjustCache = new Map<string, string>()
+
+// 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: string, bg: string): string {
+  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<T>(
   obj: Record<string, T>,
@@ -40,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.1.1'
+export const version = '5.2.1'

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
+}