react-msaview 3.1.12 → 3.2.1

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,11 @@ 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'
+import {
+  mouseOverCoordToGlobalCoord,
+  globalCoordToRowSpecificCoord,
+} from './rowCoordinateCalculations'
 
 export interface Accession {
   accession: string
@@ -72,7 +76,6 @@ export interface TextTrackModel extends BasicTrackModel {
 }
 
 export interface ITextTrack {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ReactComponent: React.FC<any>
   model: TextTrackModel
 }
@@ -98,10 +101,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 +126,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 +197,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 +225,7 @@ function stateModelFactory() {
          * autorun
          */
         data: types.optional(DataModelF(), { tree: '', msa: '' }),
+
         /**
          * #property
          */
@@ -203,6 +233,13 @@ function stateModelFactory() {
       }),
     )
     .volatile(() => ({
+      /**
+       * #volatile
+       */
+      headerHeight: 0,
+      /**
+       * #volatile
+       */
       status: undefined as { msg: string; url?: string } | undefined,
       /**
        * #volatile
@@ -221,7 +258,7 @@ function stateModelFactory() {
       /**
        * #volatile
        */
-      width: 800,
+      volatileWidth: undefined as number | undefined,
       /**
        * #volatile
        * resize handle width between tree and msa area, px
@@ -232,7 +269,7 @@ function stateModelFactory() {
        * #volatile
        * size of blocks of content to be drawn, px
        */
-      blockSize: 1000,
+      blockSize: 500,
 
       /**
        * #volatile
@@ -289,11 +326,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 +365,7 @@ function stateModelFactory() {
        * #action
        */
       setWidth(arg: number) {
-        self.width = arg
+        self.volatileWidth = arg
       },
       /**
        * #action
@@ -405,10 +460,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 +516,35 @@ function stateModelFactory() {
       },
     }))
 
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get realAllowedGappyness() {
+        return self.hideGaps ? self.allowedGappyness : 100
+      },
+      /**
+       * #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
@@ -473,7 +557,7 @@ function stateModelFactory() {
        * #getter
        */
       get colorScheme() {
-        return colorSchemes[self.colorSchemeName]
+        return colorSchemes[self.colorSchemeName]!
       },
 
       /**
@@ -502,18 +586,18 @@ 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
        */
-      get menuItems() {
+      menuItems() {
         return []
       },
       /**
@@ -530,11 +614,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 +632,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 +647,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 +661,9 @@ function stateModelFactory() {
        * #getter
        */
       get root() {
-        let hier = hierarchy(this._tree, d => d.branchset)
+        let hier = hierarchy(this.tree, d => d.branchset)
+          // todo: investigate whether needed, typescript says branchset always true
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           .sum(d => (d.branchset ? 0 : 1))
           .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
 
@@ -588,10 +674,12 @@ 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))
+          .map(node => {
+            collapse(node)
+          })
 
         return hier
       },
@@ -614,42 +702,57 @@ function stateModelFactory() {
        * #getter
        */
       get blanks() {
+        const { hideGaps, realAllowedGappyness } = self
         const blanks = []
-        const strs = this.hierarchy
-          .leaves()
-          .map(leaf => this.MSA?.getRow(leaf.data.name))
-          .filter((item): item is string => !!item)
-
-        for (let i = 0; i < strs[0]?.length; i++) {
-          let counter = 0
-          for (const str of strs) {
-            if (str[i] === '-') {
-              counter++
+        if (hideGaps) {
+          const strs = this.leaves
+            .map(leaf => this.MSA?.getRow(leaf.data.name))
+            .filter((item): item is string => !!item)
+          if (strs.length) {
+            for (let i = 0; i < strs[0]!.length; i++) {
+              let counter = 0
+              for (const str of strs) {
+                if (str[i] === '-') {
+                  counter++
+                }
+              }
+              if (counter / strs.length >= realAllowedGappyness / 100) {
+                blanks.push(i)
+              }
             }
           }
-          if (counter === strs.length) {
-            blanks.push(i)
-          }
         }
         return blanks
       },
+      /**
+       * #getter
+       */
+      get blanksSet() {
+        return new Set(this.blanks)
+      },
       /**
        * #getter
        */
       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])
       },
+
+      /**
+       * #getter
+       */
+      get rowMap() {
+        return new Map(this.rows)
+      },
       /**
        * #getter
        */
       get columns() {
         return Object.fromEntries(
           this.rows.map(
-            (row, index) => [row[0], this.columns2d[index]] as const,
+            (row, index) => [row[0], this.columns2d[index]!] as const,
           ),
         )
       },
@@ -674,15 +777,27 @@ function stateModelFactory() {
         for (const column of columns) {
           for (let j = 0; j < column.length; j++) {
             const l = r[j] || {}
-            if (!l[column[j]]) {
-              l[column[j]] = 0
+            const cj = column[j]!
+            if (!l[cj]) {
+              l[cj] = 0
             }
-            l[column[j]]++
+            l[cj]++
             r[j] = l
           }
         }
         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 +818,13 @@ function stateModelFactory() {
       get totalHeight() {
         return this.root.leaves().length * self.rowHeight
       },
+
+      /**
+       * #getter
+       */
+      get leaves() {
+        return this.hierarchy.leaves()
+      },
     }))
     .views(self => ({
       /**
@@ -717,7 +839,7 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get initialized() {
+      get dataInitialized() {
         return (self.data.msa || self.data.tree) && !self.error
       },
       /**
@@ -751,7 +873,7 @@ function stateModelFactory() {
         const ret = []
         for (const by of self.blocksY) {
           for (const bx of self.blocksX) {
-            ret.push([bx, by])
+            ret.push([bx, by] as const)
           }
         }
         return ret
@@ -769,29 +891,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 +1009,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,
@@ -872,7 +1043,7 @@ function stateModelFactory() {
        */
       get conservation() {
         if (self.columns2d.length) {
-          for (let i = 0; i < self.columns2d[0].length; i++) {
+          for (let i = 0; i < self.columns2d[0]!.length; i++) {
             const col = []
             for (const column of self.columns2d) {
               col.push(column[i])
@@ -912,28 +1083,46 @@ function stateModelFactory() {
         return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id))
       },
 
+      /**
+       * #getter
+       */
+      get showHorizontalScrollbar() {
+        return self.msaAreaWidth < self.totalWidth
+      },
+
+      /**
+       * #getter
+       */
+      get rowNamesSet() {
+        return new Map(self.rowNames.map((r, idx) => [r, idx]))
+      },
+
       /**
        * #method
-       * return a row-specific sequence coordinate, skipping gaps, given a global
-       * coordinate
+       * return a row-specific letter, or undefined if gap
        */
-      globalCoordToRowSpecificSeqCoord(rowName: string, position: number) {
-        const { rowNames, rows } = self
-        const index = rowNames.indexOf(rowName)
-        if (index !== -1 && rows[index]) {
-          const row = rows[index][1]
+      mouseOverCoordToRowLetter(rowName: string, position: number) {
+        const { rowMap, blanks } = self
+        return rowMap.get(rowName)?.[
+          mouseOverCoordToGlobalCoord(blanks, position)
+        ]
+      },
 
-          let k = 0
-          for (let i = 0; i < position; i++) {
-            if (row[i] !== '-') {
-              k++
-            } else if (k >= position) {
-              break
-            }
-          }
-          return k
+      /**
+       * #method
+       * return a row-specific sequence coordinate, skipping gaps, given a
+       * global coordinate
+       */
+      mouseOverCoordToGapRemovedRowCoord(rowName: string, position: number) {
+        const { rowMap, blanks } = self
+        const seq = rowMap.get(rowName)
+        if (seq !== undefined) {
+          const pos2 = mouseOverCoordToGlobalCoord(blanks, position)
+          const pos1 = globalCoordToRowSpecificCoord(seq, pos2)
+          return seq[pos1] === '-' || !seq[pos1] ? undefined : pos1
+        } else {
+          return undefined
         }
-        return 0
       },
 
       /**
@@ -963,6 +1152,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)
@@ -973,20 +1173,21 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get tidyTypes() {
+      get tidyInterProAnnotationTypes() {
         const types = new Map<string, Accession>()
-        if (this.tidyAnnotations) {
-          for (const { name, accession, description } of this.tidyAnnotations) {
-            types.set(accession, { name, accession, description })
-          }
+        for (const annot of this.tidyInterProAnnotations) {
+          types.set(annot.accession, annot)
         }
         return types
       },
-      get tidyAnnotations() {
+      /**
+       * #getter
+       */
+      get tidyInterProAnnotations() {
         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) {
@@ -1010,30 +1211,50 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get tidyFilteredAnnotations() {
-        return this.tidyAnnotations.filter(r =>
+      get tidyFilteredInterProAnnotations() {
+        return this.tidyInterProAnnotations.filter(r =>
           self.featureFilters.get(r.accession),
         )
       },
       /**
        * #getter
        */
-      get tidyFilteredGatheredAnnotations() {
-        return groupBy(this.tidyFilteredAnnotations, r => r.id)
+      get tidyFilteredGatheredInterProAnnotations() {
+        return groupBy(this.tidyFilteredInterProAnnotations, r => r.id)
       },
     }))
     .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()]
+        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]
+          map[key] = palettes[k]![i]!
           i++
         }
         return map
       },
+      /**
+       * #getter
+       */
       get strokePalette() {
         return Object.fromEntries(
           Object.entries(this.fillPalette).map(([key, val]) => [
@@ -1044,18 +1265,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
@@ -1098,7 +1324,7 @@ function stateModelFactory() {
         addDisposer(
           self,
           autorun(() => {
-            for (const key of self.tidyTypes.keys()) {
+            for (const key of self.tidyInterProAnnotationTypes.keys()) {
               this.initFilter(key)
             }
           }),
@@ -1154,9 +1380,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 +1400,21 @@ function stateModelFactory() {
           }),
         )
 
+        // 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
+        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
+            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
+            self.columns
+          }),
+        )
+
         // autorun synchronizes treeWidth with treeAreaWidth
         addDisposer(
           self,