react-msaview 3.1.11 → 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,11 +52,7 @@ import { DataModelF } from './model/DataModel'
 import { DialogQueueSessionMixin } from './model/DialogQueue'
 import { TreeF } from './model/treeModel'
 import { MSAModelF } from './model/msaModel'
-import {
-  InterProScanResults,
-  launchInterProScan,
-  loadInterProScanResults,
-} from './launchInterProScan'
+import type { InterProScanResults } from './launchInterProScan'
 
 export interface Accession {
   accession: string
@@ -102,10 +98,20 @@ function stateModelFactory() {
          * id of view, randomly generated if not provided
          */
         id: ElementId,
+
+        /**
+         * #property
+         */
+        showDomains: false,
+        /**
+         * #property
+         */
+        allowedGappyness: 100,
         /**
          * #property
          */
-        featureMode: false,
+        contrastLettering: true,
+
         /**
          * #property
          */
@@ -117,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
@@ -174,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
@@ -200,6 +222,7 @@ function stateModelFactory() {
          * autorun
          */
         data: types.optional(DataModelF(), { tree: '', msa: '' }),
+
         /**
          * #property
          */
@@ -207,6 +230,13 @@ function stateModelFactory() {
       }),
     )
     .volatile(() => ({
+      /**
+       * #volatile
+       */
+      headerHeight: 0,
+      /**
+       * #volatile
+       */
       status: undefined as { msg: string; url?: string } | undefined,
       /**
        * #volatile
@@ -225,7 +255,7 @@ function stateModelFactory() {
       /**
        * #volatile
        */
-      width: 800,
+      volatileWidth: undefined as number | undefined,
       /**
        * #volatile
        * resize handle width between tree and msa area, px
@@ -236,7 +266,7 @@ function stateModelFactory() {
        * #volatile
        * size of blocks of content to be drawn, px
        */
-      blockSize: 1000,
+      blockSize: 500,
 
       /**
        * #volatile
@@ -293,17 +323,29 @@ function stateModelFactory() {
        * #volatile
        *
        */
-      loadedInterProAnnotations: undefined as
+      interProAnnotations: undefined as
         | undefined
         | Record<string, InterProScanResults>,
-      /**
-       * #volatile
-       */
-      interProScanJobIds: JSON.parse(
-        localStorageGetItem('msaview-interproscanqueries') || '[]',
-      ) as { jobId: string; date: number }[],
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      setHideGaps(arg: boolean) {
+        self.hideGaps = arg
+      },
+      /**
+       * #action
+       */
+      setAllowedGappyness(arg: number) {
+        self.allowedGappyness = arg
+      },
+      /**
+       * #action
+       */
+      setContrastLettering(arg: boolean) {
+        self.contrastLettering = arg
+      },
       /**
        * #action
        */
@@ -320,7 +362,7 @@ function stateModelFactory() {
        * #action
        */
       setWidth(arg: number) {
-        self.width = arg
+        self.volatileWidth = arg
       },
       /**
        * #action
@@ -349,8 +391,8 @@ function stateModelFactory() {
       /**
        * #action
        */
-      setFeatureMode(arg: boolean) {
-        self.featureMode = arg
+      setShowDomains(arg: boolean) {
+        self.showDomains = arg
       },
 
       /**
@@ -415,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)
         }
       },
       /**
@@ -471,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
@@ -512,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
@@ -540,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
       },
@@ -558,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() || {
@@ -573,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
@@ -587,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))
 
@@ -598,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))
@@ -624,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)
 
@@ -637,7 +702,7 @@ function stateModelFactory() {
               counter++
             }
           }
-          if (counter === strs.length) {
+          if (counter / strs.length >= allowedGappyness / 100) {
             blanks.push(i)
           }
         }
@@ -648,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])
       },
@@ -693,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
@@ -713,6 +788,13 @@ function stateModelFactory() {
       get totalHeight() {
         return this.root.leaves().length * self.rowHeight
       },
+
+      /**
+       * #getter
+       */
+      get leaves() {
+        return this.hierarchy.leaves()
+      },
     }))
     .views(self => ({
       /**
@@ -727,7 +809,7 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get initialized() {
+      get dataInitialized() {
         return (self.data.msa || self.data.tree) && !self.error
       },
       /**
@@ -779,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
       },
 
       /**
@@ -835,15 +966,6 @@ function stateModelFactory() {
           self.turnedOffTracks.set(id, true)
         }
       },
-      /**
-       * #action
-       */
-      addInterProScanJobId(arg: string) {
-        self.interProScanJobIds = [
-          ...self.interProScanJobIds,
-          { jobId: arg, date: +Date.now() },
-        ]
-      },
       /**
        * #action
        */
@@ -857,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,
@@ -931,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
@@ -982,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)
@@ -1001,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) {
@@ -1042,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
@@ -1053,6 +1213,9 @@ function stateModelFactory() {
         }
         return map
       },
+      /**
+       * #getter
+       */
       get strokePalette() {
         return Object.fromEntries(
           Object.entries(this.fillPalette).map(([key, val]) => [
@@ -1066,49 +1229,20 @@ function stateModelFactory() {
       /**
        * #action
        */
-      async loadInterProScanResults(jobId: string) {
-        self.setStatus({ msg: 'Loading ' + jobId })
-        const ret = await loadInterProScanResults(jobId)
-        self.setStatus()
-        self.setLoadedInterProAnnotations(
-          Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
-        )
-      },
-      /**
-       * #action
-       */
-      async queryInterProScan(programs: string[]) {
-        const { rows } = self
-        if (rows.length > 140) {
-          throw new Error('Too many sequences, please run InterProScan offline')
-        }
-
-        const ret = await launchInterProScan({
-          algorithm: 'interproscan',
-          programs: programs,
-          seq: rows
-            .map(row => `>${row[0]}\n${row[1].replaceAll('-', '')}`)
-            .join('\n'),
-          onProgress: arg => self.setStatus(arg),
-          onJobId: jobId => self.addInterProScanJobId(jobId),
-        })
-
-        self.setLoadedInterProAnnotations(
-          Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
-        )
+      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
@@ -1156,25 +1290,7 @@ function stateModelFactory() {
             }
           }),
         )
-        addDisposer(
-          self,
-          autorun(async () => {
-            // const res = Object.fromEntries(
-            //   await Promise.all(
-            //     self.annotationTracks.map(async f => {
-            //       const d = await jsonfetch(
-            //         `https://jbrowse.org/demos/interproscan/json/${encodeURIComponent(f)}`,
-            //       )
-            //       return [
-            //         decodeURIComponent(f).replace('.json', ''),
-            //         d.result.results[0],
-            //       ] as const
-            //     }),
-            //   ),
-            // )
-            // self.setLoadedInterProAnnotations(res)
-          }),
-        )
+
         // autorun opens treeFilehandle
         addDisposer(
           self,
@@ -1225,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)
@@ -1243,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,
@@ -1257,16 +1386,6 @@ function stateModelFactory() {
             }
           }),
         )
-
-        addDisposer(
-          self,
-          autorun(() => {
-            localStorageSetItem(
-              'msaview-interproscanqueries',
-              JSON.stringify(self.interProScanJobIds),
-            )
-          }),
-        )
       },
     }))
     .postProcessSnapshot(result => {