react-msaview 4.8.1 → 5.0.3

package/src/model.ts

@@ -9,6 +9,11 @@ import {
 } from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
+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 { autorun, transaction } from 'mobx'
 import {
   A3mMSA,
   ClustalMSA,
@@ -22,17 +27,11 @@ import {
   parseNewick,
   stockholmSniff,
 } from 'msa-parsers'
-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 { addDisposer, cast, types } from 'mobx-state-tree'
 
-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,37 +55,38 @@ 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'
 import type { HierarchyNode } from 'd3-hierarchy'
-import type { Instance } from 'mobx-state-tree'
 
 const showZoomStarKey = 'msa-showZoomStar'
 
@@ -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) => {
@@ -1191,13 +1219,18 @@ function stateModelFactory() {
             return 0
           }
 
-          let entropy = 0
+          const merged: Record<string, number> = {}
           for (const letter of Object.keys(stats)) {
             if (letter === '-' || letter === '.') {
               continue
             }
-            const count = stats[letter]!
-            const freq = count / nonGapTotal
+            const upper = letter.toUpperCase()
+            merged[upper] = (merged[upper] || 0) + stats[letter]!
+          }
+
+          let entropy = 0
+          for (const key of Object.keys(merged)) {
+            const freq = merged[key]! / nonGapTotal
             if (freq > 0) {
               entropy -= freq * Math.log2(freq)
             }
@@ -1612,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,
@@ -1728,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
@@ -1792,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,15 +4,16 @@ 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 { Theme } from '@mui/material'
+import type { Context as ContextType } from '@jbrowse/svgcanvas'
 
 export interface ExportSvgOptions {
   theme: Theme
@@ -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,

package/src/reparseTree.ts

@@ -1,4 +1,4 @@
-import type { NodeWithIds } from './types'
+import type { NodeWithIds } from './types.ts'
 
 // this reparse routine helps to allow the app to hide/collapse a single
 // leafnode

package/src/rowCoordinateCalculations.test.ts

@@ -5,7 +5,7 @@ import {
   globalColToVisibleCol,
   visibleColToGlobalCol,
   visibleColToSeqPos,
-} from './rowCoordinateCalculations'
+} from './rowCoordinateCalculations.ts'
 
 // Tests for visibleColToGlobalCol (visible → global)
 test('visibleColToGlobalCol with blanks at positions [2, 5, 8]', () => {

package/src/rowCoordinateCalculations.ts

@@ -1,4 +1,4 @@
-import { isBlank } from './util'
+import { isBlank } from './util.ts'
 
 /**
  * MSA Coordinate Systems:

package/src/seqPosToGlobalCol.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest'
 
-import { seqPosToGlobalCol } from './seqPosToGlobalCol'
+import { seqPosToGlobalCol } from './seqPosToGlobalCol.ts'
 
 describe('seqPosToGlobalCol', () => {
   test('converts sequence position to global column with no gaps', () => {

package/src/seqPosToGlobalCol.ts

@@ -1,4 +1,4 @@
-import { isBlank } from './util'
+import { isBlank } from './util.ts'
 
 /**
  * Convert a sequence position (ungapped, 0-based) to a global column index.

package/src/util.ts

@@ -2,7 +2,7 @@ import { colord, extend } from 'colord'
 import namesPlugin from 'colord/plugins/names'
 import { max } from 'd3-array'
 
-import type { NodeWithIds } from './types'
+import type { NodeWithIds } from './types.ts'
 import type { Theme } from '@mui/material'
 import type { HierarchyNode } from 'd3-hierarchy'
 

package/src/vendor/copyToClipboard.ts

@@ -0,0 +1,125 @@
+/**
+ * Copy text to clipboard utility.
+ * Uses modern Clipboard API with fallback to execCommand.
+ */
+
+function deselectCurrent() {
+  const selection = document.getSelection()
+  if (!selection?.rangeCount) {
+    return () => {}
+  }
+  const active = document.activeElement as HTMLElement | null
+
+  const ranges: Range[] = []
+  for (let i = 0; i < selection.rangeCount; i++) {
+    ranges.push(selection.getRangeAt(i))
+  }
+
+  const tagName = active?.tagName.toUpperCase()
+  if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
+    active?.blur()
+  }
+
+  selection.removeAllRanges()
+  return () => {
+    if (selection.type === 'Caret') {
+      selection.removeAllRanges()
+    }
+    if (!selection.rangeCount) {
+      for (const range of ranges) {
+        selection.addRange(range)
+      }
+    }
+    active?.focus()
+  }
+}
+
+export interface CopyOptions {
+  debug?: boolean
+  format?: string
+  onCopy?: (clipboardData: DataTransfer) => void
+}
+
+export default function copy(text: string, options?: CopyOptions): boolean {
+  const debug = options?.debug || false
+  let success = false
+  let reselectPrevious: (() => void) | undefined
+  let range: Range | undefined
+  let selection: Selection | null = null
+  let mark: HTMLSpanElement | undefined
+
+  try {
+    reselectPrevious = deselectCurrent()
+    range = document.createRange()
+    selection = document.getSelection()
+
+    mark = document.createElement('span')
+    mark.textContent = text
+    mark.ariaHidden = 'true'
+    mark.style.all = 'unset'
+    mark.style.position = 'fixed'
+    mark.style.top = '0'
+    mark.style.clip = 'rect(0, 0, 0, 0)'
+    mark.style.whiteSpace = 'pre'
+    mark.style.webkitUserSelect = 'text'
+    ;(mark.style as unknown as Record<string, string>).MozUserSelect = 'text'
+    ;(mark.style as unknown as Record<string, string>).msUserSelect = 'text'
+    mark.style.userSelect = 'text'
+
+    mark.addEventListener('copy', e => {
+      e.stopPropagation()
+      if (options?.format) {
+        e.preventDefault()
+        if (e.clipboardData) {
+          e.clipboardData.clearData()
+          e.clipboardData.setData(options.format, text)
+        }
+      }
+      if (options?.onCopy && e.clipboardData) {
+        e.preventDefault()
+        options.onCopy(e.clipboardData)
+      }
+    })
+
+    document.body.append(mark)
+    range.selectNodeContents(mark)
+    selection?.addRange(range)
+
+    const successful = document.execCommand('copy')
+    if (!successful) {
+      throw new Error('copy command was unsuccessful')
+    }
+    success = true
+  } catch (err) {
+    if (debug) {
+      console.error('unable to copy using execCommand:', err)
+    }
+    try {
+      const clipboardData = (window as unknown as Record<string, DataTransfer>)
+        .clipboardData
+      if (clipboardData) {
+        clipboardData.setData(options?.format || 'text', text)
+        options?.onCopy?.(clipboardData)
+        success = true
+      }
+    } catch (err2) {
+      if (debug) {
+        console.error('unable to copy using clipboardData:', err2)
+      }
+    }
+  } finally {
+    if (selection) {
+      if (typeof selection.removeRange === 'function' && range) {
+        selection.removeRange(range)
+      } else {
+        selection.removeAllRanges()
+      }
+    }
+    if (mark) {
+      mark.remove()
+    }
+    reselectPrevious?.()
+  }
+
+  return success
+}

package/src/vendor/fileSaver.ts

@@ -0,0 +1,107 @@
+/**
+ * FileSaver.js
+ * A saveAs() FileSaver implementation.
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: MIT
+ * source: http://purl.eligrey.com/github/FileSaver.js
+ *
+ * Vendored and converted to ESM/TypeScript for pure ESM compatibility.
+ */
+
+function click(node: HTMLAnchorElement) {
+  try {
+    node.dispatchEvent(new MouseEvent('click'))
+  } catch {
+    const evt = document.createEvent('MouseEvents')
+    evt.initMouseEvent(
+      'click',
+      true,
+      true,
+      window,
+      0,
+      0,
+      0,
+      80,
+      20,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null,
+    )
+    node.dispatchEvent(evt)
+  }
+}
+
+// Detect WebView inside a native macOS app by ruling out all browsers
+const isMacOSWebView =
+  typeof navigator !== 'undefined' &&
+  navigator.userAgent.includes('Macintosh') &&
+  navigator.userAgent.includes('AppleWebKit') &&
+  !navigator.userAgent.includes('Safari')
+
+export function saveAs(blob: Blob | string, name?: string) {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const URL = window.URL
+  const a = document.createElement('a')
+  name = name || (blob instanceof Blob ? 'download' : 'download')
+
+  // Use download attribute if available and not macOS WebView
+  if ('download' in HTMLAnchorElement.prototype && !isMacOSWebView) {
+    a.download = name
+    a.rel = 'noopener'
+
+    if (typeof blob === 'string') {
+      a.href = blob
+      click(a)
+    } else {
+      a.href = URL.createObjectURL(blob)
+      setTimeout(() => {
+        URL.revokeObjectURL(a.href)
+      }, 40000)
+      setTimeout(() => {
+        click(a)
+      }, 0)
+    }
+    return
+  }
+
+  // Fallback for browsers without download attribute support
+  if (typeof blob === 'string') {
+    window.open(blob, '_blank')
+    return
+  }
+
+  const isSafari =
+    /constructor/i.test(
+      (window as unknown as { HTMLElement: unknown }).HTMLElement?.toString() ??
+        '',
+    ) || !!(window as unknown as { safari?: unknown }).safari
+  const isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent)
+
+  if (
+    (isChromeIOS || isSafari || isMacOSWebView) &&
+    typeof FileReader !== 'undefined'
+  ) {
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      let url = reader.result as string
+      url = isChromeIOS
+        ? url
+        : url.replace(/^data:[^;]*;/, 'data:attachment/file;')
+      window.open(url, '_blank')
+    }
+    reader.readAsDataURL(blob)
+  } else {
+    const url = URL.createObjectURL(blob)
+    window.open(url, '_blank')
+    setTimeout(() => {
+      URL.revokeObjectURL(url)
+    }, 40000)
+  }
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.8.0'
+export const version = '5.0.3'

package/src/webpack.ts

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
-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 * from 'react-dom/client'