react-msaview 3.1.12 → 3.2.0

package/src/model.ts

@@ -1,23 +1,23 @@
 import React from 'react'
+import type { Buffer } from 'buffer'
 import { autorun, transaction } from 'mobx'
-import { Instance, cast, types, addDisposer } from 'mobx-state-tree'
-import { hierarchy, cluster, HierarchyNode } from 'd3-hierarchy'
+import { type Instance, cast, types, addDisposer } from 'mobx-state-tree'
+import { hierarchy, cluster, type HierarchyNode } from 'd3-hierarchy'
 import { ascending } from 'd3-array'
 import Stockholm from 'stockholm-js'
 import { saveAs } from 'file-saver'
-import { Theme } from '@mui/material'
+import type { Theme } from '@mui/material'
+import { ungzip } from 'pako'
 
 // jbrowse
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst'
-import { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
+import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import { openLocation } from '@jbrowse/core/util/io'
-import {
-  groupBy,
-  localStorageGetItem,
-  localStorageSetItem,
-  notEmpty,
-  sum,
-} from '@jbrowse/core/util'
+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 {
@@ -27,8 +27,8 @@ import {
   maxLength,
   setBrLength,
   skipBlanks,
-  NodeWithIds,
-  NodeWithIdsAndLength,
+  type NodeWithIds,
+  type NodeWithIdsAndLength,
   len,
 } from './util'
 import { colord } from 'colord'
@@ -52,7 +52,7 @@ import { DataModelF } from './model/DataModel'
 import { DialogQueueSessionMixin } from './model/DialogQueue'
 import { TreeF } from './model/treeModel'
 import { MSAModelF } from './model/msaModel'
-import { InterProScanResults } from './launchInterProScan'
+import type { InterProScanResults } from './launchInterProScan'
 
 export interface Accession {
   accession: string
@@ -98,10 +98,20 @@ function stateModelFactory() {
          * id of view, randomly generated if not provided
          */
         id: ElementId,
+
         /**
          * #property
          */
         showDomains: false,
+        /**
+         * #property
+         */
+        allowedGappyness: 100,
+        /**
+         * #property
+         */
+        contrastLettering: true,
+
         /**
          * #property
          */
@@ -113,6 +123,20 @@ function stateModelFactory() {
          */
         type: types.literal('MsaView'),
 
+        /**
+         * #property
+         */
+        drawMsaLetters: true,
+        /**
+         * #property
+         */
+        hideGaps: true,
+
+        /**
+         * #property
+         */
+        drawTreeText: true,
+
         /**
          * #property
          * height of the div containing the view, px
@@ -170,15 +194,17 @@ function stateModelFactory() {
 
         /**
          * #property
-         * array of tree parent nodes that are 'collapsed'
+         * array of tree parent nodes that are 'collapsed' (all children are
+         * hidden)
          */
         collapsed: types.array(types.string),
 
         /**
          * #property
-         * array of tree leaf nodes that are 'collapsed'
+         * array of tree leaf nodes that are 'collapsed' (just that leaf node
+         * is hidden)
          */
-        collapsed2: types.array(types.string),
+        collapsedLeaves: types.array(types.string),
         /**
          * #property
          * focus on particular subtree
@@ -196,6 +222,7 @@ function stateModelFactory() {
          * autorun
          */
         data: types.optional(DataModelF(), { tree: '', msa: '' }),
+
         /**
          * #property
          */
@@ -203,6 +230,13 @@ function stateModelFactory() {
       }),
     )
     .volatile(() => ({
+      /**
+       * #volatile
+       */
+      headerHeight: 0,
+      /**
+       * #volatile
+       */
       status: undefined as { msg: string; url?: string } | undefined,
       /**
        * #volatile
@@ -221,7 +255,7 @@ function stateModelFactory() {
       /**
        * #volatile
        */
-      width: 800,
+      volatileWidth: undefined as number | undefined,
       /**
        * #volatile
        * resize handle width between tree and msa area, px
@@ -232,7 +266,7 @@ function stateModelFactory() {
        * #volatile
        * size of blocks of content to be drawn, px
        */
-      blockSize: 1000,
+      blockSize: 500,
 
       /**
        * #volatile
@@ -289,11 +323,29 @@ function stateModelFactory() {
        * #volatile
        *
        */
-      loadedInterProAnnotations: undefined as
+      interProAnnotations: undefined as
         | undefined
         | Record<string, InterProScanResults>,
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      setHideGaps(arg: boolean) {
+        self.hideGaps = arg
+      },
+      /**
+       * #action
+       */
+      setAllowedGappyness(arg: number) {
+        self.allowedGappyness = arg
+      },
+      /**
+       * #action
+       */
+      setContrastLettering(arg: boolean) {
+        self.contrastLettering = arg
+      },
       /**
        * #action
        */
@@ -310,7 +362,7 @@ function stateModelFactory() {
        * #action
        */
       setWidth(arg: number) {
-        self.width = arg
+        self.volatileWidth = arg
       },
       /**
        * #action
@@ -405,10 +457,10 @@ function stateModelFactory() {
        * #action
        */
       toggleCollapsed2(node: string) {
-        if (self.collapsed2.includes(node)) {
-          self.collapsed2.remove(node)
+        if (self.collapsedLeaves.includes(node)) {
+          self.collapsedLeaves.remove(node)
         } else {
-          self.collapsed2.push(node)
+          self.collapsedLeaves.push(node)
         }
       },
       /**
@@ -461,6 +513,29 @@ function stateModelFactory() {
       },
     }))
 
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get actuallyShowDomains() {
+        return self.showDomains && !!self.interProAnnotations
+      },
+      /**
+       * #getter
+       */
+      get viewInitialized() {
+        return self.volatileWidth !== undefined
+      },
+      /**
+       * #getter
+       */
+      get width() {
+        if (self.volatileWidth === undefined) {
+          throw new Error('not initialized')
+        }
+        return self.volatileWidth
+      },
+    }))
     .views(self => ({
       /**
        * #method
@@ -502,13 +577,13 @@ function stateModelFactory() {
        * #getter
        */
       get noTree() {
-        return !!this._tree.noTree
+        return !!this.tree.noTree
       },
       /**
        * #getter
        */
-      get noAnnotations() {
-        return !self.loadedInterProAnnotations
+      get noDomains() {
+        return !self.interProAnnotations
       },
       /**
        * #getter
@@ -530,11 +605,11 @@ function stateModelFactory() {
         if (text) {
           if (Stockholm.sniff(text)) {
             return new StockholmMSA(text, self.currentAlignment)
-          } else if (text.startsWith('>')) {
+          }
+          if (text.startsWith('>')) {
             return new FastaMSA(text)
-          } else {
-            return new ClustalMSA(text)
           }
+          return new ClustalMSA(text)
         }
         return null
       },
@@ -548,7 +623,7 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get _tree(): NodeWithIds {
+      get tree(): NodeWithIds {
         const ret = self.data.tree
           ? generateNodeIds(parseNewick(self.data.tree))
           : this.MSA?.getTree() || {
@@ -563,7 +638,7 @@ function stateModelFactory() {
        * #getter
        */
       get rowNames(): string[] {
-        return this.hierarchy.leaves().map(n => n.data.name)
+        return this.leaves.map(n => n.data.name)
       },
       /**
        * #getter
@@ -577,7 +652,7 @@ function stateModelFactory() {
        * #getter
        */
       get root() {
-        let hier = hierarchy(this._tree, d => d.branchset)
+        let hier = hierarchy(this.tree, d => d.branchset)
           .sum(d => (d.branchset ? 0 : 1))
           .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
 
@@ -588,7 +663,7 @@ function stateModelFactory() {
           }
         }
 
-        ;[...self.collapsed, ...self.collapsed2]
+        ;[...self.collapsed, ...self.collapsedLeaves]
           .map(collapsedId => hier.find(node => node.data.id === collapsedId))
           .filter(notEmpty)
           .map(node => collapse(node))
@@ -614,9 +689,9 @@ function stateModelFactory() {
        * #getter
        */
       get blanks() {
+        const { allowedGappyness } = self
         const blanks = []
-        const strs = this.hierarchy
-          .leaves()
+        const strs = this.leaves
           .map(leaf => this.MSA?.getRow(leaf.data.name))
           .filter((item): item is string => !!item)
 
@@ -627,7 +702,7 @@ function stateModelFactory() {
               counter++
             }
           }
-          if (counter === strs.length) {
+          if (counter / strs.length >= allowedGappyness / 100) {
             blanks.push(i)
           }
         }
@@ -638,8 +713,7 @@ function stateModelFactory() {
        */
       get rows() {
         const MSA = this.MSA
-        return this.hierarchy
-          .leaves()
+        return this.leaves
           .map(leaf => [leaf.data.name, MSA?.getRow(leaf.data.name)] as const)
           .filter((f): f is [string, string] => !!f[1])
       },
@@ -683,6 +757,17 @@ function stateModelFactory() {
         }
         return r
       },
+
+      /**
+       * #getter
+       */
+      get colStatsSums() {
+        return Object.fromEntries(
+          Object.entries(this.colStats).map(([key, val]) => {
+            return [key, sum(Object.values(val))]
+          }),
+        )
+      },
       /**
        * #getter
        * generates a new tree that is clustered with x,y positions
@@ -703,6 +788,13 @@ function stateModelFactory() {
       get totalHeight() {
         return this.root.leaves().length * self.rowHeight
       },
+
+      /**
+       * #getter
+       */
+      get leaves() {
+        return this.hierarchy.leaves()
+      },
     }))
     .views(self => ({
       /**
@@ -717,7 +809,7 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get initialized() {
+      get dataInitialized() {
         return (self.data.msa || self.data.tree) && !self.error
       },
       /**
@@ -769,29 +861,78 @@ function stateModelFactory() {
       get maxScrollX() {
         return -self.totalWidth + (self.msaAreaWidth - 100)
       },
+      /**
+       * #getter
+       */
+      get showMsaLetters() {
+        return self.drawMsaLetters && self.rowHeight >= 5
+      },
+      /**
+       * #getter
+       */
+      get showTreeText() {
+        return self.drawLabels && self.rowHeight >= 5
+      },
     }))
     .actions(self => ({
       /**
        * #action
        */
-      zoomIn() {
+      setDrawMsaLetters(arg: boolean) {
+        self.drawMsaLetters = arg
+      },
+
+      /**
+       * #action
+       */
+      zoomOutHorizontal() {
+        self.colWidth = Math.max(1, Math.floor(self.colWidth * 0.75))
+        self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
+      },
+      /**
+       * #action
+       */
+      zoomInHorizontal() {
         self.colWidth = Math.ceil(self.colWidth * 1.5)
-        self.rowHeight = Math.ceil(self.rowHeight * 1.5)
         self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
       },
       /**
        * #action
        */
-      zoomOut() {
-        self.colWidth = Math.max(1, Math.floor(self.colWidth * 0.75))
+      zoomInVertical() {
+        self.rowHeight = Math.ceil(self.rowHeight * 1.5)
+      },
+      /**
+       * #action
+       */
+      zoomOutVertical() {
         self.rowHeight = Math.max(1.5, Math.floor(self.rowHeight * 0.75))
-        self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
       },
       /**
        * #action
        */
-      setLoadedInterProAnnotations(data: Record<string, InterProScanResults>) {
-        self.loadedInterProAnnotations = data
+      zoomIn() {
+        transaction(() => {
+          self.colWidth = Math.ceil(self.colWidth * 1.5)
+          self.rowHeight = Math.ceil(self.rowHeight * 1.5)
+          self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
+        })
+      },
+      /**
+       * #action
+       */
+      zoomOut() {
+        transaction(() => {
+          self.colWidth = Math.max(1, Math.floor(self.colWidth * 0.75))
+          self.rowHeight = Math.max(1.5, Math.floor(self.rowHeight * 0.75))
+          self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
+        })
+      },
+      /**
+       * #action
+       */
+      setInterProAnnotations(data: Record<string, InterProScanResults>) {
+        self.interProAnnotations = data
       },
 
       /**
@@ -838,9 +979,9 @@ function stateModelFactory() {
        */
       get labelsWidth() {
         let x = 0
-        const { rowHeight, hierarchy, treeMetadata, fontSize } = self
+        const { rowHeight, leaves, treeMetadata, fontSize } = self
         if (rowHeight > 5) {
-          for (const node of hierarchy.leaves()) {
+          for (const node of leaves) {
             x = Math.max(
               measureTextCanvas(
                 treeMetadata[node.data.name]?.genome || node.data.name,
@@ -912,6 +1053,13 @@ function stateModelFactory() {
         return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id))
       },
 
+      /**
+       * #getter
+       */
+      get showHorizontalScrollbar() {
+        return self.msaAreaWidth < self.totalWidth
+      },
+
       /**
        * #method
        * return a row-specific sequence coordinate, skipping gaps, given a global
@@ -963,6 +1111,17 @@ function stateModelFactory() {
     }))
 
     .views(self => ({
+      /**
+       * #getter
+       * widget width minus the tree area gives the space for the MSA
+       */
+      get msaAreaHeight() {
+        return (
+          self.height -
+          (self.showHorizontalScrollbar ? self.minimapHeight : 0) -
+          self.headerHeight
+        )
+      },
       /**
        * #getter
        * total height of track area (px)
@@ -982,11 +1141,14 @@ function stateModelFactory() {
         }
         return types
       },
+      /**
+       * #getter
+       */
       get tidyAnnotations() {
         const ret = []
-        const { loadedInterProAnnotations } = self
-        if (loadedInterProAnnotations) {
-          for (const [id, val] of Object.entries(loadedInterProAnnotations)) {
+        const { interProAnnotations } = self
+        if (interProAnnotations) {
+          for (const [id, val] of Object.entries(interProAnnotations)) {
             for (const { signature, locations } of val.matches) {
               const { entry } = signature
               if (entry) {
@@ -1023,6 +1185,23 @@ function stateModelFactory() {
       },
     }))
     .views(self => ({
+      /**
+       * #getter
+       */
+      get showVerticalScrollbar() {
+        return self.msaAreaHeight < self.totalHeight
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get verticalScrollbarWidth() {
+        return self.showVerticalScrollbar ? 20 : 0
+      },
+      /**
+       * #getter
+       */
       get fillPalette() {
         const arr = [...self.tidyTypes.keys()]
         let i = 0
@@ -1034,6 +1213,9 @@ function stateModelFactory() {
         }
         return map
       },
+      /**
+       * #getter
+       */
       get strokePalette() {
         return Object.fromEntries(
           Object.entries(this.fillPalette).map(([key, val]) => [
@@ -1044,18 +1226,23 @@ function stateModelFactory() {
       },
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      setHeaderHeight(arg: number) {
+        self.headerHeight = arg
+      },
       /**
        * #action
        */
       reset() {
-        transaction(() => {
-          self.setData({ tree: '', msa: '' })
-          self.setScrollY(0)
-          self.setScrollX(0)
-          self.setCurrentAlignment(0)
-          self.setTreeFilehandle(undefined)
-          self.setMSAFilehandle(undefined)
-        })
+        self.setData({ tree: '', msa: '' })
+        self.setError(undefined)
+        self.setScrollY(0)
+        self.setScrollX(0)
+        self.setCurrentAlignment(0)
+        self.setTreeFilehandle(undefined)
+        self.setMSAFilehandle(undefined)
       },
       /**
        * #action
@@ -1154,9 +1341,11 @@ function stateModelFactory() {
             if (msaFilehandle) {
               try {
                 self.setLoadingMSA(true)
-                const res = await openLocation(msaFilehandle).readFile('utf8')
+                const res = await openLocation(msaFilehandle).readFile()
+                const buf = isGzip(res) ? ungzip(res) : res
+                const txt = new TextDecoder('utf8').decode(buf)
                 transaction(() => {
-                  self.setMSA(res)
+                  self.setMSA(txt)
                   if (msaFilehandle.locationType === 'BlobLocation') {
                     // clear filehandle after loading if from a local file
                     self.setMSAFilehandle(undefined)
@@ -1172,6 +1361,17 @@ function stateModelFactory() {
           }),
         )
 
+        addDisposer(
+          self,
+          autorun(() => {
+            // force colStats not to go stale,
+            // xref solution https://github.com/mobxjs/mobx/issues/266#issuecomment-222007278
+            // xref problem https://github.com/GMOD/react-msaview/issues/75
+            self.colStats
+            self.colStatsSums
+            self.columns
+          }),
+        )
         // autorun synchronizes treeWidth with treeAreaWidth
         addDisposer(
           self,

package/src/parseNewick.ts

@@ -85,7 +85,7 @@ export default function parse(s: string) {
         if (x === ')' || x === '(' || x === ',') {
           tree.name = token
         } else if (x === ':') {
-          tree.length = parseFloat(token)
+          tree.length = Number.parseFloat(token)
         }
       }
     }

package/src/parsers/ClustalMSA.ts

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

package/src/parsers/FastaMSA.ts

@@ -1,4 +1,4 @@
-import { NodeWithIds } from '../util'
+import type { NodeWithIds } from '../util'
 
 function parseSmallFasta(text: string) {
   return text

package/src/parsers/StockholmMSA.ts

@@ -1,7 +1,7 @@
 import Stockholm from 'stockholm-js'
 import parseNewick from '../parseNewick'
 
-import { NodeWithIds, generateNodeIds } from '../util'
+import { type NodeWithIds, generateNodeIds } from '../util'
 interface StockholmEntry {
   gf: {
     DE?: string[]

package/src/renderToSvg.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { when } from 'mobx'
 import { renderToStaticMarkup } from '@jbrowse/core/util'
-import { Theme } from '@mui/material'
+import type { Theme } from '@mui/material'
 
 // locals
-import { MsaViewModel } from './model'
+import type { MsaViewModel } from './model'
 import { renderTreeCanvas } from './components/tree/renderTreeCanvas'
 import { renderMSABlock } from './components/msa/renderMSABlock'
 import { colorContrast } from './util'
@@ -17,7 +17,7 @@ export async function renderToSvg(
   model: MsaViewModel,
   opts: { theme: Theme; includeMinimap?: boolean; exportType: string },
 ) {
-  await when(() => !!model.initialized)
+  await when(() => !!model.dataInitialized)
   const { width, height, scrollX, scrollY } = model
   const { exportType, theme, includeMinimap } = opts
 
@@ -31,7 +31,8 @@ export async function renderToSvg(
       offsetX: 0,
       includeMinimap,
     })
-  } else if (exportType === 'viewport') {
+  }
+  if (exportType === 'viewport') {
     return render({
       width,
       height,
@@ -41,9 +42,8 @@ export async function renderToSvg(
       offsetX: -scrollX,
       includeMinimap,
     })
-  } else {
-    throw new Error('unknown export type')
   }
+  throw new Error('unknown export type')
 }
 
 async function render({

package/src/reparseTree.ts

@@ -1,4 +1,4 @@
-import { NodeWithIds } from './util'
+import type { NodeWithIds } from './util'
 
 export function reparseTree(tree: NodeWithIds): NodeWithIds {
   return {