react-msaview 4.0.2 → 4.1.0

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 { TreeF } 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
@@ -95,7 +88,7 @@ function stateModelFactory() {
   return types
     .compose(
       DialogQueueSessionMixin(),
-      TreeF(),
+      TreeModelF(),
       MSAModelF(),
       types.model('MsaView', {
         /**
@@ -135,7 +128,7 @@ function stateModelFactory() {
         /**
          * #property
          */
-        hideGaps: true,
+        hideGaps: false,
 
         /**
          * #property
@@ -236,6 +229,10 @@ function stateModelFactory() {
          * #property
          */
         featureFilters: types.map(types.boolean),
+        /**
+         * #property
+         */
+        relativeTo: types.maybe(types.string),
       }),
     )
     .volatile(() => ({
@@ -330,13 +327,18 @@ function stateModelFactory() {
 
       /**
        * #volatile
-       *
        */
       interProAnnotations: undefined as
         | undefined
         | Record<string, InterProScanResults>,
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      drawRelativeTo(id: string) {
+        self.relativeTo = id
+      },
       /**
        * #action
        */
@@ -749,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
@@ -770,7 +778,10 @@ function stateModelFactory() {
        * #getter
        */
       get columns2d() {
-        return this.rows.map(r => r[1]).map(str => skipBlanks(this.blanks, str))
+        const { hideGaps } = self
+        return this.rows
+          .map(r => r[1])
+          .map(str => (hideGaps ? skipBlanks(this.blanks, str) : str))
       },
       /**
        * #getter
@@ -905,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
@@ -1067,12 +1082,17 @@ function stateModelFactory() {
        * #getter
        */
       get adapterTrackModels(): BasicTrack[] {
+        const { rowHeight, MSA, hideGaps, blanks } = self
         return (
-          self.MSA?.tracks.map(t => ({
+          MSA?.tracks.map(t => ({
             model: {
               ...t,
-              data: t.data ? skipBlanks(self.blanks, t.data) : undefined,
-              height: self.rowHeight,
+              data: t.data
+                ? hideGaps
+                  ? skipBlanks(blanks, t.data)
+                  : t.data
+                : undefined,
+              height: rowHeight,
             } as TextTrackModel,
             ReactComponent: TextTrack,
           })) || []
@@ -1339,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(
@@ -1426,10 +1455,12 @@ function stateModelFactory() {
         addDisposer(
           self,
           autorun(() => {
-            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-            self.colStats
-            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-            self.colStatsSums
+            if (self.colorSchemeName.includes('dynamic')) {
+              // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
+              self.colStats
+              // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
+              self.colStatsSums
+            }
             // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
             self.columns
           }),

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.2'
+export const version = '4.1.0'