react-msaview 5.0.1 → 5.0.4

package/src/components/import/ImportForm.tsx

@@ -4,10 +4,10 @@ import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
 import { Button, Container, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import ImportFormExamples from './ImportFormExamples'
-import { load } from './util'
+import ImportFormExamples from './ImportFormExamples.tsx'
+import { load } from './util.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 import type { FileLocation } from '@jbrowse/core/util/types'
 
 const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {

package/src/components/import/ImportFormExamples.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 import { Link, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { smallMSA, smallMSAOnly, smallTree } from './data/seq2'
-import { load } from './util'
+import { smallMSA, smallMSAOnly, smallTree } from './data/seq2.ts'
+import { load } from './util.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 function ListItem({
   onClick,

package/src/components/import/util.ts

@@ -1,4 +1,4 @@
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 import type { FileLocation } from '@jbrowse/core/util'
 
 export async function load(

package/src/components/minimap/Minimap.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 interface ClickCoord {
   clientX: number

package/src/components/minimap/MinimapSVG.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
   const {

package/src/components/msa/MSACanvas.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import { observer } from 'mobx-react'
 
-import Loading from './Loading'
-import MSACanvasBlock from './MSACanvasBlock'
+import Loading from './Loading.tsx'
+import MSACanvasBlock from './MSACanvasBlock.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const {

package/src/components/msa/MSACanvasBlock.tsx

@@ -5,11 +5,11 @@ import { useTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
-import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock'
-import { renderMSABlock } from './renderMSABlock'
-import { colorContrast } from '../../util'
+import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
+import { renderMSABlock } from './renderMSABlock.ts'
+import { colorContrast } from '../../util.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MSACanvasBlock = observer(function ({
   model,
@@ -139,7 +139,8 @@ const MSACanvasBlock = observer(function ({
         <BaseTooltip
           clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}
         >
-          Insertion ({hoveredInsertion.letters.length}bp):{' '}
+          Insertion ({hoveredInsertion.letters.length}
+          {model.sequenceType === 'amino' ? 'aa' : 'bp'}):{' '}
           {hoveredInsertion.letters.length > 20
             ? `${hoveredInsertion.letters.slice(0, 20)}...`
             : hoveredInsertion.letters}

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -4,9 +4,9 @@ import { isAlive } from '@jbrowse/mobx-state-tree'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
-import { renderMouseover } from './renderMSAMouseover'
+import { renderMouseover } from './renderMSAMouseover.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MSAMouseoverCanvas = observer(function ({
   model,

package/src/components/msa/MSAPanel.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import MSACanvas from './MSACanvas'
-import MSAMouseoverCanvas from './MSAMouseoverCanvas'
+import MSACanvas from './MSACanvas.tsx'
+import MSAMouseoverCanvas from './MSAMouseoverCanvas.tsx'
 
 // types
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MSAPanel = observer(function ({ model }: { model: MsaViewModel }) {
   return (

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,5 +1,5 @@
-import type { MsaViewModel } from '../../model'
-import type { NodeWithIdsAndLength } from '../../types'
+import type { MsaViewModel } from '../../model.ts'
+import type { NodeWithIdsAndLength } from '../../types.ts'
 import type { HierarchyNode } from 'd3-hierarchy'
 
 export function renderBoxFeatureCanvasBlock({

package/src/components/msa/renderMSABlock.ts

@@ -1,5 +1,5 @@
-import type { MsaViewModel } from '../../model'
-import type { NodeWithIdsAndLength } from '../../types'
+import type { MsaViewModel } from '../../model.ts'
+import type { NodeWithIdsAndLength } from '../../types.ts'
 import type { Theme } from '@mui/material'
 import type { HierarchyNode } from 'd3-hierarchy'
 

package/src/components/msa/renderMSAMouseover.ts

@@ -1,4 +1,4 @@
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const hoverColor = 'rgba(0,0,0,0.15)'
 const highlightColor = 'rgba(128,128,0,0.2)'

package/src/components/tracks/renderTracksSvg.ts

@@ -1,5 +1,5 @@
-import type { MsaViewModel } from '../../model'
-import type { BasicTrack } from '../../types'
+import type { MsaViewModel } from '../../model.ts'
+import type { BasicTrack } from '../../types.ts'
 
 export function renderConservationTrack({
   model,

package/src/components/tree/TreeBranchMenu.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 interface Node {
   x: number

package/src/components/tree/TreeCanvas.tsx

@@ -4,10 +4,10 @@ import { isAlive } from '@jbrowse/mobx-state-tree'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
-import TreeCanvasBlock from './TreeCanvasBlock'
-import { padding } from './renderTreeCanvas'
+import TreeCanvasBlock from './TreeCanvasBlock.tsx'
+import { padding } from './renderTreeCanvas.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)

package/src/components/tree/TreeCanvasBlock.tsx

@@ -5,11 +5,11 @@ import Flatbush from 'flatbush'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
-import TreeBranchMenu from './TreeBranchMenu'
-import TreeNodeMenu from './TreeNodeMenu'
-import { padding, renderTreeCanvas } from './renderTreeCanvas'
+import TreeBranchMenu from './TreeBranchMenu.tsx'
+import TreeNodeMenu from './TreeNodeMenu.tsx'
+import { padding, renderTreeCanvas } from './renderTreeCanvas.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 interface TooltipData {
   name: string

package/src/components/tree/TreeNodeMenu.tsx

@@ -3,10 +3,12 @@ import React, { lazy } from 'react'
 import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 // lazies
-const TreeNodeInfoDialog = lazy(() => import('./dialogs/TreeNodeInfoDialog'))
+const TreeNodeInfoDialog = lazy(
+  () => import('./dialogs/TreeNodeInfoDialog.tsx'),
+)
 
 const TreeMenu = observer(function ({
   node,

package/src/components/tree/TreePanel.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import TreeCanvas from './TreeCanvas'
+import TreeCanvas from './TreeCanvas.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
   const { treeAreaWidth } = model

package/src/components/tree/TreeRuler.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
   const { treeAreaWidth } = model

package/src/components/tree/dialogs/TreeNodeInfoDialog.tsx

@@ -6,9 +6,9 @@ import { Dialog } from '@jbrowse/core/ui'
 import { DialogContent } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import SequenceTextArea from '../../SequenceTextArea'
+import SequenceTextArea from '../../SequenceTextArea.tsx'
 
-import type { MsaViewModel } from '../../../model'
+import type { MsaViewModel } from '../../../model.ts'
 
 const TreeNodeInfoDialog = observer(function ({
   info,

package/src/components/tree/renderTreeCanvas.ts

@@ -1,4 +1,4 @@
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
 
 export const padding = 600

package/src/createPaletteMap.test.ts

@@ -0,0 +1,57 @@
+import { expect, test } from 'vitest'
+
+import { createPaletteMap } from './createPaletteMap.ts'
+import palettes from './ggplotPalettes.ts'
+
+// Original implementation for comparison
+function originalFillPalette(keys: string[]) {
+  let i = 0
+  const map = {} as Record<string, string>
+  for (const key of keys) {
+    const k = Math.min(keys.length - 1, palettes.length - 1)
+    map[key] = palettes[k]![i]!
+    i++
+  }
+  return map
+}
+
+test('createPaletteMap matches original implementation with 1 key', () => {
+  const keys = ['IPR001234']
+  expect(createPaletteMap(keys)).toEqual(originalFillPalette(keys))
+})
+
+test('createPaletteMap matches original implementation with 3 keys', () => {
+  const keys = ['IPR001234', 'IPR005678', 'IPR009012']
+  expect(createPaletteMap(keys)).toEqual(originalFillPalette(keys))
+})
+
+test('createPaletteMap matches original implementation with 8 keys (max palette size)', () => {
+  const keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
+  expect(createPaletteMap(keys)).toEqual(originalFillPalette(keys))
+})
+
+test('createPaletteMap matches original implementation with more keys than palette colors', () => {
+  const keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
+  expect(createPaletteMap(keys)).toEqual(originalFillPalette(keys))
+})
+
+test('createPaletteMap returns correct colors for 3 keys', () => {
+  const keys = ['X', 'Y', 'Z']
+  const result = createPaletteMap(keys)
+  // With 3 keys, uses palette index 2 (0-indexed)
+  expect(result).toEqual({
+    X: '#F8766D',
+    Y: '#00BA38',
+    Z: '#619CFF',
+  })
+})
+
+test('createPaletteMap returns empty object for empty keys', () => {
+  expect(createPaletteMap([])).toEqual({})
+})
+
+test('createPaletteMap preserves key order', () => {
+  const keys = ['Z', 'A', 'M']
+  const result = createPaletteMap(keys)
+  expect(Object.keys(result)).toEqual(['Z', 'A', 'M'])
+})

package/src/createPaletteMap.ts

@@ -0,0 +1,11 @@
+import palettes from './ggplotPalettes.ts'
+
+/**
+ * Creates a map from keys to colors using ggplot-style palettes.
+ * The palette is selected based on the number of keys.
+ */
+export function createPaletteMap(keys: string[]) {
+  const k = Math.min(keys.length - 1, palettes.length - 1)
+  const palette = palettes[k]!
+  return Object.fromEntries(keys.map((key, i) => [key, palette[i]!]))
+}

package/src/index.ts

@@ -1,3 +1,13 @@
-export { default as MSAView } from './components/Loading'
-export { type MsaViewModel, default as MSAModelF } from './model'
+export { default as MSAView } from './components/Loading.tsx'
+export { type MsaViewModel, default as MSAModelF } from './model.ts'
 export type { MSAParserType } from 'msa-parsers'
+export type { InterProScanResults } from './launchInterProScan.ts'
+export type {
+  Accession,
+  BasicTrack,
+  BasicTrackModel,
+  Node,
+  NodeWithIds,
+  NodeWithIdsAndLength,
+  TextTrackModel,
+} from './types.ts'

package/src/launchInterProScan.ts

@@ -1,8 +1,8 @@
 import { getSession } from '@jbrowse/core/util'
 
-import { jsonfetch, textfetch, timeout } from './fetchUtils'
+import { jsonfetch, textfetch, timeout } from './fetchUtils.ts'
 
-import type { MsaViewModel } from './model'
+import type { MsaViewModel } from './model.ts'
 
 const base = 'https://www.ebi.ac.uk/Tools/services/rest'
 

package/src/model/msaModel.ts

@@ -1,6 +1,6 @@
 import { types } from '@jbrowse/mobx-state-tree'
 
-import { defaultBgColor, defaultColorSchemeName } from '../constants'
+import { defaultBgColor, defaultColorSchemeName } from '../constants.ts'
 
 /**
  * #stateModel MSAModel

package/src/model/treeModel.ts

@@ -9,7 +9,7 @@ import {
   defaultTreeAreaWidth,
   defaultTreeWidth,
   defaultTreeWidthMatchesArea,
-} from '../constants'
+} from '../constants.ts'
 
 /**
  * #stateModel Tree

package/src/model.ts

@@ -13,7 +13,6 @@ import { addDisposer, cast, types } from '@jbrowse/mobx-state-tree'
 import { colord } from 'colord'
 import { ascending } from 'd3-array'
 import { cluster, hierarchy } from 'd3-hierarchy'
-import { saveAs } from 'file-saver'
 import { autorun, transaction } from 'mobx'
 import {
   A3mMSA,
@@ -29,10 +28,10 @@ import {
   stockholmSniff,
 } from 'msa-parsers'
 
-import { blocksX, blocksY } from './calculateBlocks'
-import colorSchemes from './colorSchemes'
-import ConservationTrack from './components/ConservationTrack'
-import TextTrack from './components/TextTrack'
+import { blocksX, blocksY } from './calculateBlocks.ts'
+import colorSchemes from './colorSchemes.ts'
+import ConservationTrack from './components/ConservationTrack.tsx'
+import TextTrack from './components/TextTrack.tsx'
 import {
   defaultAllowedGappyness,
   defaultBgColor,
@@ -56,33 +55,34 @@ import {
   defaultTreeAreaWidth,
   defaultTreeWidth,
   defaultTreeWidthMatchesArea,
-} from './constants'
-import { flatToTree } from './flatToTree'
-import palettes from './ggplotPalettes'
-import { measureTextCanvas } from './measureTextCanvas'
-import { DataModelF } from './model/DataModel'
-import { DialogQueueSessionMixin } from './model/DialogQueue'
-import { MSAModelF } from './model/msaModel'
-import { TreeModelF } from './model/treeModel'
-import { calculateNeighborJoiningTree } from './neighborJoining'
-import { parseAsn1 } from './parseAsn1'
-import { reparseTree } from './reparseTree'
+} from './constants.ts'
+import { createPaletteMap } from './createPaletteMap.ts'
+import { flatToTree } from './flatToTree.ts'
+import { measureTextCanvas } from './measureTextCanvas.ts'
+import { DataModelF } from './model/DataModel.ts'
+import { DialogQueueSessionMixin } from './model/DialogQueue.ts'
+import { MSAModelF } from './model/msaModel.ts'
+import { TreeModelF } from './model/treeModel.ts'
+import { calculateNeighborJoiningTree } from './neighborJoining.ts'
+import { parseAsn1 } from './parseAsn1.ts'
+import { reparseTree } from './reparseTree.ts'
 import {
   globalColToVisibleCol,
   visibleColToGlobalCol,
   visibleColToSeqPosForRow,
-} from './rowCoordinateCalculations'
-import { seqPosToGlobalCol } from './seqPosToGlobalCol'
-import { collapse, len, maxLength, setBrLength, skipBlanks } from './util'
+} from './rowCoordinateCalculations.ts'
+import { seqPosToGlobalCol } from './seqPosToGlobalCol.ts'
+import { collapse, len, maxLength, setBrLength, skipBlanks } from './util.ts'
+import { saveAs } from './vendor/fileSaver.ts'
 
-import type { InterProScanResults } from './launchInterProScan'
+import type { InterProScanResults } from './launchInterProScan.ts'
 import type {
   Accession,
   BasicTrack,
   NodeWithIds,
   NodeWithIdsAndLength,
   TextTrackModel,
-} from './types'
+} from './types.ts'
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import type { Instance } from '@jbrowse/mobx-state-tree'
 import type { Theme } from '@mui/material'
@@ -460,7 +460,7 @@ function stateModelFactory() {
         }
 
         // Get all descendant leaf names
-        const descendantNames = node.leaves().map((leaf: any) => leaf.data.name)
+        const descendantNames = node.leaves().map(leaf => leaf.data.name)
 
         self.hoveredTreeNode = { nodeId, descendantNames }
       },
@@ -999,6 +999,34 @@ function stateModelFactory() {
         return this.colStats.map(val => sum(Object.values(val)))
       },
 
+      /**
+       * #getter
+       * Detects sequence type based on letters present in the alignment.
+       * Returns 'dna', 'rna', or 'amino'.
+       */
+      get sequenceType(): 'dna' | 'rna' | 'amino' {
+        const letters = new Set<string>()
+        for (const stats of this.colStats) {
+          for (const letter of Object.keys(stats)) {
+            const upper = letter.toUpperCase()
+            if (upper !== '-' && upper !== '.') {
+              letters.add(upper)
+            }
+          }
+        }
+        const dna = new Set(['A', 'C', 'G', 'T', 'N'])
+        const rna = new Set(['A', 'C', 'G', 'U', 'N'])
+        const isDna = [...letters].every(l => dna.has(l))
+        const isRna = [...letters].every(l => rna.has(l))
+        if (isDna && !letters.has('U')) {
+          return 'dna'
+        }
+        if (isRna && !letters.has('T')) {
+          return 'rna'
+        }
+        return 'amino'
+      },
+
       /**
        * #getter
        * Pre-computed consensus letter and percent identity color per column.
@@ -1175,8 +1203,8 @@ function stateModelFactory() {
        * Returns values 0-1 where 1 = fully conserved, 0 = no conservation.
        */
       get conservation() {
-        const { colStats, colStatsSums } = this
-        const alphabetSize = 20
+        const { colStats, colStatsSums, sequenceType } = this
+        const alphabetSize = sequenceType === 'amino' ? 20 : 4
         const maxEntropy = Math.log2(alphabetSize)
 
         return colStats.map((stats, i) => {
@@ -1502,7 +1530,7 @@ function stateModelFactory() {
             .map(t => ({
               model: {
                 ...t,
-                data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data!,
+                data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data,
                 height: rowHeight,
               } as TextTrackModel,
               ReactComponent: TextTrack,
@@ -1617,9 +1645,9 @@ function stateModelFactory() {
        * @returns The global column index in the full MSA
        */
       seqPosToGlobalCol(rowName: string, seqPos: number) {
-        const { rowNames, rows } = self
-        const index = rowNames.indexOf(rowName)
-        return index !== -1 && rows[index]
+        const { rows } = self
+        const index = this.rowNamesSet.get(rowName)
+        return index !== undefined && rows[index]
           ? seqPosToGlobalCol({
               row: rows[index][1],
               seqPos,
@@ -1733,15 +1761,7 @@ function stateModelFactory() {
        * #getter
        */
       get fillPalette() {
-        const arr = [...self.tidyInterProAnnotationTypes.keys()]
-        let i = 0
-        const map = {} as Record<string, string>
-        for (const key of arr) {
-          const k = Math.min(arr.length - 1, palettes.length - 1)
-          map[key] = palettes[k]![i]!
-          i++
-        }
-        return map
+        return createPaletteMap([...self.tidyInterProAnnotationTypes.keys()])
       },
       /**
        * #getter
@@ -1797,7 +1817,7 @@ function stateModelFactory() {
         includeTracks?: boolean
         exportType: string
       }) {
-        const { renderToSvg } = await import('./renderToSvg')
+        const { renderToSvg } = await import('./renderToSvg.tsx')
         const html = await renderToSvg(self as MsaViewModel, opts)
         const blob = new Blob([html], { type: 'image/svg+xml' })
         saveAs(blob, 'image.svg')

package/src/neighborJoining.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest'
 
-import { calculateNeighborJoiningTree } from './neighborJoining'
+import { calculateNeighborJoiningTree } from './neighborJoining.ts'
 
 describe('calculateNeighborJoiningTree', () => {
   test('generates valid Newick tree for 2 sequences', () => {

package/src/parseAsn1.test.ts

@@ -2,7 +2,7 @@ import fs from 'fs'
 
 import { expect, test } from 'vitest'
 
-import { parseAsn1 } from './parseAsn1'
+import { parseAsn1 } from './parseAsn1.ts'
 
 const r = fs.readFileSync(require.resolve('../test/data/tree.asn'), 'utf8')
 

package/src/renderToSvg.tsx

@@ -4,14 +4,15 @@ import React from 'react'
 import { renderToStaticMarkup } from '@jbrowse/core/util'
 import { when } from 'mobx'
 
-import MinimapSVG from './components/minimap/MinimapSVG'
-import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock'
-import { renderMSABlock } from './components/msa/renderMSABlock'
-import { renderAllTracks } from './components/tracks/renderTracksSvg'
-import { renderTreeCanvas } from './components/tree/renderTreeCanvas'
-import { colorContrast } from './util'
+import MinimapSVG from './components/minimap/MinimapSVG.tsx'
+import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock.ts'
+import { renderMSABlock } from './components/msa/renderMSABlock.ts'
+import { renderAllTracks } from './components/tracks/renderTracksSvg.ts'
+import { renderTreeCanvas } from './components/tree/renderTreeCanvas.ts'
+import { colorContrast } from './util.ts'
 
-import type { MsaViewModel } from './model'
+import type { MsaViewModel } from './model.ts'
+import type { Context as ContextType } from '@jbrowse/svgcanvas'
 import type { Theme } from '@mui/material'
 
 export interface ExportSvgOptions {
@@ -80,7 +81,7 @@ async function render({
   includeMinimap?: boolean
   includeTracks?: boolean
 }) {
-  const { Context } = await import('svgcanvas')
+  const { Context } = await import('@jbrowse/svgcanvas')
   const Wrapper = includeMinimap ? MinimapWrapper : NullWrapper
 
   return renderToStaticMarkup(
@@ -131,17 +132,16 @@ function CoreRendering({
   contentHeight: number
   offsetX: number
   offsetY: number
-  Context: (
-    width: number,
-    height: number,
-  ) => CanvasRenderingContext2D & { getSvg: () => { innerHTML: string } }
+  Context: typeof ContextType
 }) {
   const { treeAreaWidth, colorScheme, id } = model
   const clipId1 = `tree-${id}`
   const clipId2 = `msa-${id}`
   const contrastScheme = colorContrast(colorScheme, theme)
-  const ctx1 = Context(width, contentHeight)
-  const ctx2 = Context(width, contentHeight)
+
+  const ctx1 = new Context(width, contentHeight) as any
+
+  const ctx2 = new Context(width, contentHeight) as any
   renderBoxFeatureCanvasBlock({
     ctx: ctx2,
     offsetX,
@@ -209,16 +209,14 @@ function TrackRendering({
   width: number
   trackHeight: number
   offsetX: number
-  Context: (
-    width: number,
-    height: number,
-  ) => CanvasRenderingContext2D & { getSvg: () => { innerHTML: string } }
+  Context: typeof ContextType
 }) {
   const { treeAreaWidth, colorScheme, id } = model
   const clipId = `tracks-${id}`
   const contrastScheme = colorContrast(colorScheme, theme)
   const msaAreaWidth = width - treeAreaWidth
-  const ctx = Context(msaAreaWidth, trackHeight)
+
+  const ctx = new Context(msaAreaWidth, trackHeight) as any
 
   renderAllTracks({
     model,