react-msaview 5.10.0 → 6.0.0

package/src/components/msa/renderMSABlock.ts

@@ -1,6 +1,7 @@
 import { setFontSize } from '../../setFontSize.ts'
 import { adjustColorForContrast } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
+import { domainBandCursor } from './domainBandCursor.ts'
 import { visibleColRange } from './visibleColRange.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -167,8 +168,9 @@ function drawTilesAndText({
       if (str) {
         const tileY = y - rowHeight
         const textY = y - quarterRowHeight
-        const bands = overDomains ? domainBandsByStart.get(name) : undefined
-        let band = 0
+        const bandAt = domainBandCursor(
+          overDomains ? domainBandsByStart.get(name) : undefined,
+        )
 
         for (let j = 0, l2 = str.length; j < l2; j++) {
           const col = xStart + j
@@ -186,27 +188,21 @@ function drawTilesAndText({
           }
 
           if (showMsaLetters) {
-            // bands are sorted by start column and the sweep is left to right,
-            // so one forward-only cursor finds the band covering each column
-            while (bands && band < bands.length && bands[band]!.endCol <= col) {
-              band++
-            }
-            const covering = bands?.[band]
-            ctx.fillStyle =
-              covering && covering.startCol <= col
-                ? // on top of a domain box: contrast against the box fill
-                  domainColors!.get(covering.annotation.accession)!
-                : tiles
-                  ? // on top of a colored tile
-                    (contrastScheme[letter] ?? 'black')
-                  : !drawTiles || !color
-                    ? // plain background, uncolored letters
-                      theme.palette.text.primary
-                    : // letter-color mode: darken/lighten to stay readable
-                      adjustColorForContrast(
-                        color,
-                        theme.palette.background.default,
-                      )
+            const covering = bandAt(col)
+            ctx.fillStyle = covering
+              ? // on top of a domain box: contrast against the box fill
+                domainColors!.get(covering.annotation.accession)!
+              : tiles
+                ? // on top of a colored tile
+                  (contrastScheme[letter] ?? 'black')
+                : !drawTiles || !color
+                  ? // plain background, uncolored letters
+                    theme.palette.text.primary
+                  : // letter-color mode: darken/lighten to stay readable
+                    adjustColorForContrast(
+                      color,
+                      theme.palette.background.default,
+                    )
             ctx.fillText(
               isMatchingReference ? '.' : letter,
               x + halfColWidth,

package/src/components/msa/renderMSAMouseover.ts

@@ -23,8 +23,7 @@ export function renderMouseover({
   const {
     mouseCol,
     colWidth,
-    msaAreaWidth,
-    verticalScrollbarWidth,
+    msaCanvasWidth: width,
     height,
     rowHeight,
     scrollX,
@@ -37,7 +36,6 @@ export function renderMouseover({
     hoveredRowIndices,
     highlightedColumnRuns,
   } = model
-  const width = msaAreaWidth - verticalScrollbarWidth
   ctx.resetTransform()
   ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
   ctx.scale(highResScaleFactor, highResScaleFactor)

package/src/components/tree/TreeRuler.tsx

@@ -4,9 +4,14 @@ import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
 
+// The gutter above the tree panel. It spans the resize handle too, so whatever
+// follows it in the top row starts exactly where the alignment canvas does --
+// MainArea has TreePanel + VerticalResizeHandle before the alignment.
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeAreaWidth } = model
-  return <div style={{ flexShrink: 0, width: treeAreaWidth }} />
+  const { treeAreaWidth, resizeHandleWidth } = model
+  return (
+    <div style={{ flexShrink: 0, width: treeAreaWidth + resizeHandleWidth }} />
+  )
 })
 
 export default TreeRuler

package/src/components/tree/renderTreeCanvas.test.ts

@@ -117,8 +117,9 @@ describe('getNodeX cladogram positioning', () => {
   })
 })
 
-// the x values the tree pass actually strokes, for a model built from newick
-function drawnTreeXs(newick: string) {
+// the x values the tree pass actually strokes, for a model built from newick,
+// alongside the tree width they are expected to span
+function drawnTree(newick: string) {
   const model = stateModelFactory().create({
     type: 'MsaView',
     data: { msa: '>a\nA\n>b\nA\n>c\nA\n>d\nA', tree: newick },
@@ -150,19 +151,26 @@ function drawnTreeXs(newick: string) {
     offsetY: 0,
     theme: { palette: { text: { primary: '#000' } } } as Theme,
   })
-  return xs
+  return { xs, model }
 }
 
 describe('renderTreeCanvas horizontal extent', () => {
   it('spreads a cladogram across the tree area when branch lengths are absent', () => {
     // a lengthless newick forces cladogram mode; scaling it by the (zero) max
     // branch length would stack every node on x=0 as one vertical line
-    const xs = drawnTreeXs('((a,b),(c,d));')
-    expect(Math.max(...xs)).toBe(300)
+    const { xs, model } = drawnTree('((a,b),(c,d));')
+    expect(Math.max(...xs)).toBe(model.treeWidth)
   })
 
   it('scales a phylogram by branch length', () => {
-    const xs = drawnTreeXs('((a:0.1,b:0.2):0.3,(c:0.4,d:0.5):0.6);')
-    expect(Math.max(...xs)).toBeCloseTo(300)
+    const { xs, model } = drawnTree('((a:0.1,b:0.2):0.3,(c:0.4,d:0.5):0.6);')
+    expect(Math.max(...xs)).toBeCloseTo(model.treeWidth)
+  })
+
+  // labels off means no label gutter to reserve, so the tips reach the far edge
+  // of the tree area rather than stopping at the default treeWidth
+  it('hands the label gutter to the tree when labels are off', () => {
+    const { model } = drawnTree('((a,b),(c,d));')
+    expect(model.treeWidth).toBe(model.treeAreaWidth - 10 - model.marginLeft)
   })
 })

package/src/domainBands.test.ts

@@ -18,6 +18,12 @@ const gff = `##gff-version 3
 a	Pfam	protein_match	1	4	.	.	.	Name=PF00001;signature_desc=First
 a	Pfam	protein_match	5	8	.	.	.	Name=PF00002;signature_desc=Second`
 
+// row `b` only: PF00003 ends inside the insertion, PF00004 lies entirely within
+// it, so gap hiding puts one end and then both ends into hidden columns
+const insertionGff = `##gff-version 3
+b	Pfam	protein_match	4	8	.	.	.	Name=PF00003;signature_desc=Overlapping
+b	Pfam	protein_match	5	8	.	.	.	Name=PF00004;signature_desc=Inside`
+
 function makeModel() {
   const model = MSAModelF().create({
     id: 'domain-bands-test',
@@ -56,6 +62,24 @@ test('bands follow the columns when gappy columns are hidden', () => {
   ])
 })
 
+test('a band whose end lands in a hidden column keeps its visible part', () => {
+  const model = makeModel()
+  model.applyGFFText(insertionGff)
+  expect(model.domainBands.get('b')!.map(b => [b.startCol, b.endCol])).toEqual([
+    [3, 8],
+    [4, 8],
+  ])
+
+  model.setHideGaps(true)
+  model.setAllowedGappyness(50)
+  expect(model.blanks).toEqual([4, 5, 6, 7])
+  // PF00003 covers V + the 4 hidden Qs, so only the V column survives; PF00004
+  // is nothing but hidden columns and drops out entirely
+  expect(model.domainBands.get('b')!.map(b => [b.startCol, b.endCol])).toEqual([
+    [3, 4],
+  ])
+})
+
 test('mouseOverDomains hit-tests against the drawn span', () => {
   const model = makeModel()
   const rowIndex = model.rowNames.indexOf('a')

package/src/domainLetterColor.test.ts

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+//
+// Letters drawn on top of the domain overlay take their color from the box
+// underneath them. The overlay paints bands largest-first, so with nested
+// signatures -- routine in InterProScan output, where a family encloses a
+// domain -- the box actually visible at a column is the *last* one painted,
+// not the first one covering it.
+import { expect, test } from 'vitest'
+
+import { domainBandCursor } from './components/msa/domainBandCursor.ts'
+import MSAModelF from './model.ts'
+
+const row = 'ACDEFGHIKLMNPQRSTVWY'
+const msa = `>seq1\n${row}\n>seq2\n${row}`
+
+// PF_OUTER spans the whole row, PF_INNER sits inside it. tidyInterProAnnotations
+// orders by length descending, so the outer band paints first and the inner one
+// covers it.
+const gff = `##gff-version 3
+seq1\tPfam\tprotein_match\t1\t20\t.\t.\t.\tName=PF_OUTER;signature_desc=Outer
+seq1\tPfam\tprotein_match\t8\t12\t.\t.\t.\tName=PF_INNER;signature_desc=Inner`
+
+function makeModel() {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    data: { msa },
+  })
+  model.setWidth(800)
+  model.applyGFFText(gff)
+  return model
+}
+
+function sweep(model: ReturnType<typeof makeModel>, from = 0) {
+  const bandAt = domainBandCursor(model.domainBandsByStart.get('seq1'))
+  const out: (string | undefined)[] = []
+  for (let col = from; col < 20; col++) {
+    out.push(bandAt(col)?.annotation.accession)
+  }
+  return out
+}
+
+test('the overlay paints largest-first, so stackIndex is paint order', () => {
+  const bands = makeModel().domainBands.get('seq1')!
+  expect(bands.map(b => [b.annotation.accession, b.stackIndex])).toEqual([
+    ['PF_OUTER', 0],
+    ['PF_INNER', 1],
+  ])
+})
+
+test('a nested band wins the columns it covers', () => {
+  const model = makeModel()
+  // PF_INNER is seq positions 8-12 (1-based), i.e. columns 7..11
+  expect(sweep(model)).toEqual([
+    ...Array.from({ length: 7 }, () => 'PF_OUTER'),
+    ...Array.from({ length: 5 }, () => 'PF_INNER'),
+    ...Array.from({ length: 8 }, () => 'PF_OUTER'),
+  ])
+})
+
+test('a sweep starting mid-block picks up bands opened before it', () => {
+  // canvas blocks start at arbitrary columns, so the cursor has to catch up on
+  // its first call rather than assuming it began at column 0
+  const model = makeModel()
+  expect(sweep(model, 9)).toEqual([
+    'PF_INNER',
+    'PF_INNER',
+    'PF_INNER',
+    ...Array.from({ length: 8 }, () => 'PF_OUTER'),
+  ])
+})
+
+test('columns outside every band have no covering band', () => {
+  const model = makeModel()
+  model.setFilter('PF_OUTER', false)
+  const bandAt = domainBandCursor(model.domainBandsByStart.get('seq1'))
+  expect(bandAt(0)).toBeUndefined()
+  expect(bandAt(9)?.annotation.accession).toBe('PF_INNER')
+  expect(bandAt(19)).toBeUndefined()
+})

package/src/ggplotPalettes.ts

@@ -18,8 +18,4 @@ const palettes = [
   ],
 ]
 
-export function getPalette(l: number) {
-  return palettes[Math.min(l, palettes.length - 1)]!
-}
-
 export default palettes

package/src/hierarchy.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, test } from 'vitest'
 import {
   calcDepthToLeaf,
   collapse,
-  collapsedSubtreeLengthExtent,
+  collapsedSubtreeMaxLength,
   find,
   findMaxBranchLen,
   hierarchy,
@@ -124,7 +124,7 @@ describe('collapse', () => {
   })
 })
 
-describe('collapsedSubtreeLengthExtent', () => {
+describe('collapsedSubtreeMaxLength', () => {
   // root → A(1) → [ A1(2), C(3) → [ C1(1), C2(10) ] ]
   function makeLenTree(): NodeWithIds {
     return {
@@ -152,18 +152,18 @@ describe('collapsedSubtreeLengthExtent', () => {
     }
   }
 
-  test('min/max cumulative branch length to the tips below a node', () => {
+  test('cumulative branch length to the farthest tip below a node', () => {
     const h = hierarchy(makeLenTree(), d => d.children)
     const nodeA = find(h, n => n.data.id === 'A')!
     collapse(nodeA)
-    // excludes A's own branch: nearest tip A1 = 2, farthest tip C2 = 3 + 10 = 13
-    expect(collapsedSubtreeLengthExtent(nodeA)).toEqual({ min: 2, max: 13 })
+    // excludes A's own branch: farthest tip C2 = 3 + 10 = 13, vs A1 = 2
+    expect(collapsedSubtreeMaxLength(nodeA)).toBe(13)
   })
 
-  test('returns zero extent for a node with no descendants', () => {
+  test('returns zero for a node with no descendants', () => {
     const h = hierarchy(makeLenTree(), d => d.children)
     const leaf = find(h, n => n.data.id === 'A1')!
-    expect(collapsedSubtreeLengthExtent(leaf)).toEqual({ min: 0, max: 0 })
+    expect(collapsedSubtreeMaxLength(leaf)).toBe(0)
   })
 })
 

package/src/hierarchy.ts

@@ -28,9 +28,8 @@ export interface HierarchyNode<T = NodeWithIds> extends CoreHierarchyNode<T> {
   len?: number
   depthToLeaf?: number
   _children?: HierarchyNode<T>[] | null
-  // pixel x-positions of the nearest/farthest tips of a collapsed subtree, used
-  // to draw the collapsed-clade triangle. Set in the model's hierarchy getter.
-  collapsedTipXNear?: number
+  // pixel x-position of the farthest tip of a collapsed subtree, where the base
+  // of the collapsed-clade triangle goes. Set in the model's hierarchy getter.
   collapsedTipXFar?: number
 }
 
@@ -115,14 +114,13 @@ export function collapse<T>(node: HierarchyNode<T>) {
   }
 }
 
-// Min/max cumulative raw branch length from a collapsed node down to the tips of
-// its detached subtree (excludes the node's own branch). Used to size the
+// Cumulative raw branch length from a collapsed node down to the farthest tip of
+// its detached subtree (excludes the node's own branch). Sizes the base of the
 // collapsed-clade triangle in phylogram mode.
-export function collapsedSubtreeLengthExtent<T extends { length?: number }>(
+export function collapsedSubtreeMaxLength<T extends { length?: number }>(
   node: HierarchyNode<T>,
 ) {
   const roots = node._children ?? node.children
-  let min = Infinity
   let max = 0
   if (roots) {
     const stack = roots.map(child => ({
@@ -140,12 +138,11 @@ export function collapsedSubtreeLengthExtent<T extends { length?: number }>(
           })
         }
       } else {
-        min = Math.min(min, acc)
         max = Math.max(max, acc)
       }
     }
   }
-  return { min: min === Infinity ? 0 : min, max }
+  return max
 }
 
 // Cladogram positioning based on ape's plot.phylo: uses topological depth (max

package/src/index.ts

@@ -11,7 +11,9 @@ export { default as MSAViewer } from './components/MSAViewer.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'
 export type { MSAFormat, MSAParserType } from 'msa-parsers'
 export type { HierarchyNode } from './hierarchy.ts'
-export type { InterProScanResults } from './launchInterProScan.ts'
+// InterProScanResults is the EBI wire format that setDomains still accepts;
+// Annotation is the source-agnostic shape everything else is written against
+export type { InterProScanResults } from 'msa-parsers'
 // ColumnCounts, DomainBand and TidyDomainAnnotation surface in the inferred type
 // of the composed state model, so a downstream plugin cannot emit declarations
 // for its own stateModelFactory without being able to name them (TS2883).
@@ -19,6 +21,7 @@ export type { InterProScanResults } from './launchInterProScan.ts'
 export type { ColumnCounts } from './columnCounts.ts'
 export type {
   Accession,
+  Annotation,
   BasicTrack,
   BasicTrackModel,
   DomainBand,

package/src/largeTree.test.ts

@@ -3,8 +3,8 @@ import { expect, test } from 'vitest'
 
 import MSAModelF from './model.ts'
 
-// jsdom has no 2d context, and measureTextCanvas throws without one. Only the
-// width matters here, so a stub keeps the test about tree size.
+// jsdom has no 2d context, so measureTextCanvas falls back to an estimate. Only
+// the width matters here, so a stub keeps the test about tree size.
 HTMLCanvasElement.prototype.getContext = (() => ({
   font: '12px sans-serif',
   measureText: (t: string) => ({ width: t.length * 7 }),
@@ -30,3 +30,24 @@ test('a tree far past the argument limit still lays out', () => {
   expect(model.labelsWidth).toBe(49)
   expect(model.treeWidth).toBeGreaterThan(0)
 })
+
+test('re-hovering the same tree node does not re-walk the tree', () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    data: { tree: flatNewick(200_000) },
+  })
+  model.setWidth(1000)
+
+  const leafId = model.leaves[1000]!.data.id
+  model.setHoveredTreeNode(leafId)
+  const first = model.hoveredTreeNode
+
+  // the tree's mousemove handler fires this on every event, so an unchanged id
+  // has to leave the state object alone: rebuilding it walks all 200k nodes and
+  // invalidates every overlay that reads hoveredRowIndices
+  model.setHoveredTreeNode(leafId)
+  expect(model.hoveredTreeNode).toBe(first)
+
+  model.setHoveredTreeNode(undefined)
+  expect(model.hoveredTreeNode).toBeUndefined()
+})

package/src/launchInterProScan.ts

@@ -1,30 +1,13 @@
 import { getSession } from '@jbrowse/core/util'
+import { interProScanResponseToAnnotations } from 'msa-parsers'
 
 import { isAbortError, jsonfetch, textfetch, timeout } from './fetchUtils.ts'
 
 import type { MsaViewModel } from './model.ts'
+import type { InterProScanResponse } from 'msa-parsers'
 
 const base = 'https://www.ebi.ac.uk/Tools/services/rest'
 
-export interface InterProScanResults {
-  matches: {
-    signature: {
-      entry?: {
-        name: string
-        description: string
-        accession: string
-        // original GFF feature type (exon, CDS, ...) when sourced from GFF
-        featureType?: string
-      }
-    }
-    locations: { start: number; end: number; strand?: number }[]
-  }[]
-  xref: { id: string }[]
-}
-export interface InterProScanResponse {
-  results: InterProScanResults[]
-}
-
 async function runInterProScan({
   seq,
   onProgress,
@@ -169,17 +152,7 @@ async function loadInterProScanResultsWithStatus({
       url: `https://www.ebi.ac.uk/Tools/services/rest/iprscan5/result/${jobId}/json`,
     })
     const ret = await loadInterProScanResults(jobId, signal)
-    // key each result by its xref id; skip any result lacking an xref entry
-    // rather than crashing the whole load on one malformed result
-    model.setDomains(
-      Object.fromEntries(
-        ret.results
-          .map(r => [r.xref[0]?.id, r] as const)
-          .filter(
-            (e): e is [string, InterProScanResults] => e[0] !== undefined,
-          ),
-      ),
-    )
+    model.setAnnotations(interProScanResponseToAnnotations(ret))
     getSession(model).notify(`Loaded interproscan ${jobId} results`, 'success')
   } catch (e) {
     if (isAbortError(e)) {

package/src/loadErrorDisplay.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+//
+// What a failed load LOOKS like, which is a different question from what the
+// model recorded. modelFilehandleLoaders.test.ts already pins the model half --
+// a rejected fetch sets `error` and clears `loadingMSA`, under the name "a
+// failed fetch surfaces as an error" -- and it passed throughout the whole time
+// a failed url showed the reader a spinner and nothing else.
+//
+// The error display was never missing. ImportForm renders `model.error`, and
+// the reader could not get to it: a non-abort failure KEEPS its filehandle
+// (only an abort clears it), so `hasPendingFilehandle` stayed true and
+// Loading.tsx took its spinner branch ahead of the import form, permanently.
+// Found on AlphaFold's `files/msa/` prefix answering 403 to every key in August
+// 2026 -- the view opened, said "Downloading file" with a Cancel button, and
+// was still saying it at 105s.
+import React, { act } from 'react'
+
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, expect, test } from 'vitest'
+
+import MSAView from './components/Loading.tsx'
+import MSAModelF from './model.ts'
+
+import type { MsaViewModel } from './model.ts'
+import type { Root } from 'react-dom/client'
+
+Reflect.set(globalThis, 'IS_REACT_ACT_ENVIRONMENT', true)
+
+let container: HTMLDivElement
+let root: Root
+let model: MsaViewModel
+
+function uri(u: string) {
+  return { locationType: 'UriLocation' as const, uri: u }
+}
+
+function render() {
+  act(() => {
+    root.render(<MSAView model={model} />)
+  })
+}
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.append(container)
+  root = createRoot(container)
+  model = MSAModelF().create({ type: 'MsaView' })
+  model.setWidth(800)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+test('a load that fails shows the error rather than a spinner forever', () => {
+  // the state the loader leaves behind on a 403: the filehandle it could not
+  // read is still set, nothing parsed, and the error recorded
+  model.setMSAFilehandle(uri('https://example.com/blocked.a3m'))
+  model.setLoadingMSA(false)
+  model.setError(new Error('HTTP 403 fetching blocked.a3m'))
+  render()
+
+  expect(container.textContent).toContain('403')
+  expect(container.textContent).not.toContain('Loading')
+})
+
+test('a load still in flight is a spinner, not an error', () => {
+  model.setMSAFilehandle(uri('https://example.com/slow.a3m'))
+  render()
+
+  expect(model.loadingMSA).toBe(true)
+  expect(container.textContent).not.toContain('Return to import form')
+})
+
+// A guard rather than a pin: this one passes without the fix too, because with
+// no filehandle left set the view reaches the ImportForm and that already shows
+// the error. It is here so the new branch cannot quietly swallow the case.
+//
+// It also records the surprise underneath: `dataInitialized` is itself
+// `(msa || tree) && !error`, so ANY error hides a loaded alignment, including a
+// tree or gff that 404s beside a good one -- setError is shared by every
+// filehandle loader. Whether a failed OPTIONAL file should blank a good
+// alignment is a real question and a wider one, since `dataInitialized` is read
+// in several places; narrowing it is a design change rather than this fix.
+test('an error over loaded data says so instead of a bare import form', () => {
+  const loaded = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 200,
+    data: { msa: '>seq1\nACDE\n>seq2\nACDF' },
+  })
+  loaded.setWidth(800)
+  loaded.setError(new Error('domains.gff 404'))
+  act(() => {
+    root.render(<MSAView model={loaded} />)
+  })
+
+  expect(container.textContent).toContain('domains.gff 404')
+})

package/src/measureTextCanvas.ts

@@ -1,15 +1,31 @@
 import { setFontSize } from './setFontSize.ts'
 
-let canvasHandle: HTMLCanvasElement | undefined
+// Cached across calls: labelWidthMap measures every leaf label on every layout,
+// and both createElement and getContext are far more expensive than measureText.
+// `null` records that this environment has no 2d context, so the lookup is not
+// retried on every label.
+let ctxHandle: CanvasRenderingContext2D | null | undefined
 
-export function measureTextCanvas(text: string, fontSize: number) {
-  if (!canvasHandle) {
-    canvasHandle = document.createElement('canvas')
+function getCtx() {
+  if (ctxHandle === undefined) {
+    ctxHandle =
+      typeof document === 'undefined'
+        ? null
+        : document.createElement('canvas').getContext('2d')
   }
+  return ctxHandle
+}
 
-  const ctx = canvasHandle.getContext('2d')
+// Rough average glyph width as a fraction of the font size for the sans-serif
+// stack the tree labels use. Only reached where there is no canvas to measure
+// with (jsdom, SSR); estimating the label gutter beats throwing out of the
+// layout getters that read this on every render.
+const fallbackGlyphWidthRatio = 0.6
+
+export function measureTextCanvas(text: string, fontSize: number) {
+  const ctx = getCtx()
   if (!ctx) {
-    throw new Error('no canvas context')
+    return text.length * fontSize * fallbackGlyphWidthRatio
   }
   setFontSize(ctx, fontSize)
   return ctx.measureText(text).width