react-msaview 5.1.0 → 5.2.0

package/src/renderToSvg.tsx

@@ -19,7 +19,7 @@ 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)
@@ -41,21 +41,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 ? model.minimapHeight : 0) + trackHeight,
+    contentHeight: height,
+    trackHeight,
+    theme,
+    model,
+    offsetY: -scrollY,
+    offsetX: -scrollX,
+    includeMinimap,
+    includeTracks,
+  })
 }
 
 async function render({
@@ -93,7 +90,7 @@ async function render({
             model={model}
             theme={theme}
             offsetX={offsetX}
-            width={width}
+            msaAreaWidth={width - model.treeAreaWidth}
             trackHeight={trackHeight}
           />
         ) : null}
@@ -108,7 +105,7 @@ async function render({
             theme={theme}
             offsetX={offsetX}
             offsetY={offsetY}
-            width={width}
+            msaAreaWidth={width - model.treeAreaWidth}
             contentHeight={contentHeight}
           />
         </g>
@@ -120,7 +117,7 @@ async function render({
 function CoreRendering({
   model,
   theme,
-  width,
+  msaAreaWidth,
   contentHeight,
   offsetX,
   offsetY,
@@ -128,7 +125,7 @@ function CoreRendering({
 }: {
   model: MsaViewModel
   theme: Theme
-  width: number
+  msaAreaWidth: number
   contentHeight: number
   offsetX: number
   offsetY: number
@@ -139,9 +136,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 +146,6 @@ function CoreRendering({
     blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })
-  const msaAreaWidth = width - treeAreaWidth
   renderTreeCanvas({
     model,
     offsetY,
@@ -176,8 +171,6 @@ 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>
@@ -199,14 +192,14 @@ function CoreRendering({
 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 +207,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,
@@ -277,7 +269,7 @@ 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}`}
     >
       {children}
     </svg>

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/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>,

package/src/version.ts

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