react-msaview 4.0.3 → 4.1.1

package/src/model.ts

@@ -1,64 +1,53 @@
 import React from 'react'
-import type { Buffer } from 'buffer'
-import { autorun, transaction } from 'mobx'
-import { type Instance, cast, types, addDisposer } from 'mobx-state-tree'
-import { hierarchy, cluster, type HierarchyNode } from 'd3-hierarchy'
+
+import { groupBy, notEmpty, sum } from '@jbrowse/core/util'
+import { openLocation } from '@jbrowse/core/util/io'
+import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
+import { colord } from 'colord'
 import { ascending } from 'd3-array'
-import Stockholm from 'stockholm-js'
+import { cluster, hierarchy } from 'd3-hierarchy'
 import { saveAs } from 'file-saver'
-import type { Theme } from '@mui/material'
+import { autorun, transaction } from 'mobx'
+import { addDisposer, cast, types } from 'mobx-state-tree'
 import { ungzip } from 'pako'
+import Stockholm from 'stockholm-js'
 
-// jbrowse
-import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst'
-import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
-import { openLocation } from '@jbrowse/core/util/io'
-import { groupBy, notEmpty, sum } from '@jbrowse/core/util'
-
-export function isGzip(buf: Buffer) {
-  return buf[0] === 31 && buf[1] === 139 && buf[2] === 8
-}
-
-// locals
+import { blocksX, blocksY } from './calculateBlocks'
+import colorSchemes from './colorSchemes'
+import TextTrack from './components/TextTrack'
+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 parseNewick from './parseNewick'
+import ClustalMSA from './parsers/ClustalMSA'
+import EmfMSA from './parsers/EmfMSA'
+import EmfTree from './parsers/EmfTree'
+import FastaMSA from './parsers/FastaMSA'
+import StockholmMSA from './parsers/StockholmMSA'
+import { reparseTree } from './reparseTree'
+import {
+  globalCoordToRowSpecificCoord,
+  mouseOverCoordToGlobalCoord,
+} from './rowCoordinateCalculations'
 import {
   clamp,
   collapse,
   generateNodeIds,
+  len,
   maxLength,
   setBrLength,
   skipBlanks,
-  type NodeWithIds,
-  type NodeWithIdsAndLength,
-  len,
 } from './util'
-import { colord } from 'colord'
-import { reparseTree } from './reparseTree'
-import { blocksX, blocksY } from './calculateBlocks'
-import { measureTextCanvas } from './measureTextCanvas'
-import palettes from './ggplotPalettes'
 
-// components
-import TextTrack from './components/TextTrack'
-
-// parsers
-import ClustalMSA from './parsers/ClustalMSA'
-import EmfMSA from './parsers/EmfMSA'
-import StockholmMSA from './parsers/StockholmMSA'
-import FastaMSA from './parsers/FastaMSA'
-import parseNewick from './parseNewick'
-import colorSchemes from './colorSchemes'
-
-// models
-import { DataModelF } from './model/DataModel'
-import { DialogQueueSessionMixin } from './model/DialogQueue'
-import { TreeModelF } from './model/treeModel'
-import { MSAModelF } from './model/msaModel'
 import type { InterProScanResults } from './launchInterProScan'
-import {
-  mouseOverCoordToGlobalCoord,
-  globalCoordToRowSpecificCoord,
-} from './rowCoordinateCalculations'
-import EmfTree from './parsers/EmfTree'
+import type { NodeWithIds, NodeWithIdsAndLength } from './util'
+import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
+import type { Theme } from '@mui/material'
+import type { HierarchyNode } from 'd3-hierarchy'
+import type { Instance } from 'mobx-state-tree'
 
 export interface Accession {
   accession: string
@@ -84,6 +73,10 @@ export interface ITextTrack {
 
 export type BasicTrack = ITextTrack
 
+export function isGzip(buf: Uint8Array) {
+  return buf[0] === 31 && buf[1] === 139 && buf[2] === 8
+}
+
 /**
  * #stateModel MsaView
  * extends
@@ -256,7 +249,7 @@ function stateModelFactory() {
        * high resolution scale factor, helps make canvas look better on hi-dpi
        * screens
        */
-      highResScaleFactor: 1,
+      highResScaleFactor: 2,
       /**
        * #volatile
        */
@@ -758,6 +751,12 @@ function stateModelFactory() {
           .map(leaf => [leaf.data.name, MSA?.getRow(leaf.data.name)] as const)
           .filter((f): f is [string, string] => !!f[1])
       },
+      /**
+       * #getter
+       */
+      get numRows() {
+        return this.rows.length
+      },
 
       /**
        * #getter
@@ -917,7 +916,11 @@ function stateModelFactory() {
        * #getter
        */
       get showMsaLetters() {
-        return self.drawMsaLetters && self.rowHeight >= 5
+        return (
+          self.drawMsaLetters &&
+          self.rowHeight >= 5 &&
+          self.colWidth > self.rowHeight / 2
+        )
       },
       /**
        * #getter
@@ -1356,6 +1359,15 @@ function stateModelFactory() {
       setFilter(arg: string, flag: boolean) {
         self.featureFilters.set(arg, flag)
       },
+      /**
+       * #action
+       */
+      showEntire() {
+        self.rowHeight = self.msaAreaHeight / self.numRows
+        self.colWidth = self.msaAreaWidth / self.numColumns
+        self.scrollX = 0
+        self.scrollY = 0
+      },
 
       afterCreate() {
         addDisposer(

package/src/parsers/ClustalMSA.ts

@@ -1,4 +1,5 @@
 import { parse } from 'clustal-js'
+
 import type { NodeWithIds } from '../util'
 export default class ClustalMSA {
   private MSA: ReturnType<typeof parse>

package/src/parsers/EmfMSA.ts

@@ -1,4 +1,5 @@
 import { parseEmfAln } from 'emf-js'
+
 import type { NodeWithIds } from '../util'
 
 export default class EmfMSA {

package/src/parsers/StockholmMSA.ts

@@ -1,6 +1,6 @@
 import Stockholm from 'stockholm-js'
-import parseNewick from '../parseNewick'
 
+import parseNewick from '../parseNewick'
 import { type NodeWithIds, generateNodeIds } from '../util'
 interface StockholmEntry {
   gf: {

package/src/renderToSvg.tsx

@@ -1,18 +1,17 @@
 /* eslint-disable react-refresh/only-export-components */
 import React from 'react'
-import { createRoot } from 'react-dom/client'
-import { when } from 'mobx'
+
 import { renderToStaticMarkup } from '@jbrowse/core/util'
-import type { Theme } from '@mui/material'
+import { when } from 'mobx'
 
-// locals
-import type { MsaViewModel } from './model'
-import { renderTreeCanvas } from './components/tree/renderTreeCanvas'
+import MinimapSVG from './components/minimap/MinimapSVG'
+import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock'
 import { renderMSABlock } from './components/msa/renderMSABlock'
+import { renderTreeCanvas } from './components/tree/renderTreeCanvas'
 import { colorContrast } from './util'
 
-import MinimapSVG from './components/minimap/MinimapSVG'
-import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock'
+import type { MsaViewModel } from './model'
+import type { Theme } from '@mui/material'
 
 export async function renderToSvg(
   model: MsaViewModel,
@@ -81,7 +80,6 @@ async function render({
         />
       </Wrapper>
     </SvgWrapper>,
-    createRoot,
   )
 }
 

package/src/rowCoordinateCalculations.test.ts

@@ -1,4 +1,5 @@
 import { expect, test } from 'vitest'
+
 import { mouseOverCoordToGlobalCoord } from './rowCoordinateCalculations'
 test('blanks3', () => {
   const blanks = [2, 5, 8]

package/src/util.ts

@@ -1,8 +1,9 @@
-import type { HierarchyNode } from 'd3-hierarchy'
-import { max } from 'd3-array'
-import type { Theme } from '@mui/material'
 import { colord, extend } from 'colord'
 import namesPlugin from 'colord/plugins/names'
+import { max } from 'd3-array'
+
+import type { Theme } from '@mui/material'
+import type { HierarchyNode } from 'd3-hierarchy'
 
 extend([namesPlugin])
 

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.0.3'
+export const version = '4.1.1'