react-msaview 3.1.11 → 3.2.0

package/dist/model.js

@@ -4,10 +4,14 @@ import { hierarchy, cluster } from 'd3-hierarchy';
 import { ascending } from 'd3-array';
 import Stockholm from 'stockholm-js';
 import { saveAs } from 'file-saver';
+import { ungzip } from 'pako';
 // jbrowse
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst';
 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) {
+    return buf[0] === 31 && buf[1] === 139 && buf[2] === 8;
+}
 // locals
 import { clamp, collapse, generateNodeIds, maxLength, setBrLength, skipBlanks, len, } from './util';
 import { colord } from 'colord';
@@ -28,7 +32,6 @@ import { DataModelF } from './model/DataModel';
 import { DialogQueueSessionMixin } from './model/DialogQueue';
 import { TreeF } from './model/treeModel';
 import { MSAModelF } from './model/msaModel';
-import { launchInterProScan, loadInterProScanResults, } from './launchInterProScan';
 /**
  * #stateModel MsaView
  * extends
@@ -47,7 +50,15 @@ function stateModelFactory() {
         /**
          * #property
          */
-        featureMode: false,
+        showDomains: false,
+        /**
+         * #property
+         */
+        allowedGappyness: 100,
+        /**
+         * #property
+         */
+        contrastLettering: true,
         /**
          * #property
          */
@@ -57,6 +68,18 @@ function stateModelFactory() {
          * hardcoded view type
          */
         type: types.literal('MsaView'),
+        /**
+         * #property
+         */
+        drawMsaLetters: true,
+        /**
+         * #property
+         */
+        hideGaps: true,
+        /**
+         * #property
+         */
+        drawTreeText: true,
         /**
          * #property
          * height of the div containing the view, px
@@ -105,14 +128,16 @@ function stateModelFactory() {
         currentAlignment: 0,
         /**
          * #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
@@ -135,6 +160,13 @@ function stateModelFactory() {
         featureFilters: types.map(types.boolean),
     }))
         .volatile(() => ({
+        /**
+         * #volatile
+         */
+        headerHeight: 0,
+        /**
+         * #volatile
+         */
         status: undefined,
         /**
          * #volatile
@@ -153,7 +185,7 @@ function stateModelFactory() {
         /**
          * #volatile
          */
-        width: 800,
+        volatileWidth: undefined,
         /**
          * #volatile
          * resize handle width between tree and msa area, px
@@ -163,7 +195,7 @@ function stateModelFactory() {
          * #volatile
          * size of blocks of content to be drawn, px
          */
-        blockSize: 1000,
+        blockSize: 500,
         /**
          * #volatile
          * the currently mouse-hovered row
@@ -210,13 +242,27 @@ function stateModelFactory() {
          * #volatile
          *
          */
-        loadedInterProAnnotations: undefined,
-        /**
-         * #volatile
-         */
-        interProScanJobIds: JSON.parse(localStorageGetItem('msaview-interproscanqueries') || '[]'),
+        interProAnnotations: undefined,
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setHideGaps(arg) {
+            self.hideGaps = arg;
+        },
+        /**
+         * #action
+         */
+        setAllowedGappyness(arg) {
+            self.allowedGappyness = arg;
+        },
+        /**
+         * #action
+         */
+        setContrastLettering(arg) {
+            self.contrastLettering = arg;
+        },
         /**
          * #action
          */
@@ -233,7 +279,7 @@ function stateModelFactory() {
          * #action
          */
         setWidth(arg) {
-            self.width = arg;
+            self.volatileWidth = arg;
         },
         /**
          * #action
@@ -260,8 +306,8 @@ function stateModelFactory() {
         /**
          * #action
          */
-        setFeatureMode(arg) {
-            self.featureMode = arg;
+        setShowDomains(arg) {
+            self.showDomains = arg;
         },
         /**
          * #action
@@ -320,11 +366,11 @@ function stateModelFactory() {
          * #action
          */
         toggleCollapsed2(node) {
-            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);
             }
         },
         /**
@@ -369,6 +415,29 @@ function stateModelFactory() {
         setTreeMetadata(result) {
             self.data.setTreeMetadata(result);
         },
+    }))
+        .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 => ({
         /**
@@ -408,13 +477,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
@@ -437,12 +506,10 @@ function stateModelFactory() {
                 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;
         },
@@ -455,7 +522,7 @@ function stateModelFactory() {
         /**
          * #getter
          */
-        get _tree() {
+        get tree() {
             const ret = self.data.tree
                 ? generateNodeIds(parseNewick(self.data.tree))
                 : this.MSA?.getTree() || {
@@ -470,7 +537,7 @@ function stateModelFactory() {
          * #getter
          */
         get rowNames() {
-            return this.hierarchy.leaves().map(n => n.data.name);
+            return this.leaves.map(n => n.data.name);
         },
         /**
          * #getter
@@ -483,7 +550,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));
             if (self.showOnly) {
@@ -493,7 +560,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));
@@ -516,9 +583,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);
             for (let i = 0; i < strs[0]?.length; i++) {
@@ -528,7 +595,7 @@ function stateModelFactory() {
                         counter++;
                     }
                 }
-                if (counter === strs.length) {
+                if (counter / strs.length >= allowedGappyness / 100) {
                     blanks.push(i);
                 }
             }
@@ -539,8 +606,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)])
                 .filter((f) => !!f[1]);
         },
@@ -580,6 +646,14 @@ 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
@@ -599,6 +673,12 @@ function stateModelFactory() {
         get totalHeight() {
             return this.root.leaves().length * self.rowHeight;
         },
+        /**
+         * #getter
+         */
+        get leaves() {
+            return this.hierarchy.leaves();
+        },
     }))
         .views(self => ({
         /**
@@ -612,7 +692,7 @@ function stateModelFactory() {
         /**
          * #getter
          */
-        get initialized() {
+        get dataInitialized() {
             return (self.data.msa || self.data.tree) && !self.error;
         },
         /**
@@ -663,29 +743,77 @@ 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) {
+            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) {
-            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) {
+            self.interProAnnotations = data;
         },
         /**
          * #action
@@ -716,15 +844,6 @@ function stateModelFactory() {
                 self.turnedOffTracks.set(id, true);
             }
         },
-        /**
-         * #action
-         */
-        addInterProScanJobId(arg) {
-            self.interProScanJobIds = [
-                ...self.interProScanJobIds,
-                { jobId: arg, date: +Date.now() },
-            ];
-        },
         /**
          * #action
          */
@@ -738,9 +857,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, fontSize), x);
                 }
             }
@@ -797,6 +916,12 @@ function stateModelFactory() {
         get turnedOnTracks() {
             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
@@ -846,6 +971,15 @@ 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)
@@ -865,11 +999,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) {
@@ -904,6 +1041,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;
@@ -915,6 +1069,9 @@ function stateModelFactory() {
             }
             return map;
         },
+        /**
+         * #getter
+         */
         get strokePalette() {
             return Object.fromEntries(Object.entries(this.fillPalette).map(([key, val]) => [
                 key,
@@ -926,43 +1083,20 @@ function stateModelFactory() {
         /**
          * #action
          */
-        async loadInterProScanResults(jobId) {
-            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) {
-            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) {
+            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
@@ -1001,22 +1135,6 @@ function stateModelFactory() {
                     this.initFilter(key);
                 }
             }));
-            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, autorun(async () => {
                 const { treeFilehandle } = self;
@@ -1057,9 +1175,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);
@@ -1075,15 +1195,20 @@ 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, autorun(async () => {
                 if (self.treeWidthMatchesArea) {
                     self.setTreeWidth(Math.max(50, self.treeAreaWidth - self.labelsWidth - 10 - self.marginLeft));
                 }
             }));
-            addDisposer(self, autorun(() => {
-                localStorageSetItem('msaview-interproscanqueries', JSON.stringify(self.interProScanJobIds));
-            }));
         },
     }))
         .postProcessSnapshot(result => {