react-msaview 3.1.12 → 3.2.1

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, 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,6 +32,7 @@ import { DataModelF } from './model/DataModel';
 import { DialogQueueSessionMixin } from './model/DialogQueue';
 import { TreeF } from './model/treeModel';
 import { MSAModelF } from './model/msaModel';
+import { mouseOverCoordToGlobalCoord, globalCoordToRowSpecificCoord, } from './rowCoordinateCalculations';
 /**
  * #stateModel MsaView
  * extends
@@ -47,6 +52,14 @@ function stateModelFactory() {
          * #property
          */
         showDomains: false,
+        /**
+         * #property
+         */
+        allowedGappyness: 100,
+        /**
+         * #property
+         */
+        contrastLettering: true,
         /**
          * #property
          */
@@ -56,6 +69,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
@@ -104,14 +129,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
@@ -134,6 +161,13 @@ function stateModelFactory() {
         featureFilters: types.map(types.boolean),
     }))
         .volatile(() => ({
+        /**
+         * #volatile
+         */
+        headerHeight: 0,
+        /**
+         * #volatile
+         */
         status: undefined,
         /**
          * #volatile
@@ -152,7 +186,7 @@ function stateModelFactory() {
         /**
          * #volatile
          */
-        width: 800,
+        volatileWidth: undefined,
         /**
          * #volatile
          * resize handle width between tree and msa area, px
@@ -162,7 +196,7 @@ function stateModelFactory() {
          * #volatile
          * size of blocks of content to be drawn, px
          */
-        blockSize: 1000,
+        blockSize: 500,
         /**
          * #volatile
          * the currently mouse-hovered row
@@ -209,9 +243,27 @@ function stateModelFactory() {
          * #volatile
          *
          */
-        loadedInterProAnnotations: undefined,
+        interProAnnotations: undefined,
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setHideGaps(arg) {
+            self.hideGaps = arg;
+        },
+        /**
+         * #action
+         */
+        setAllowedGappyness(arg) {
+            self.allowedGappyness = arg;
+        },
+        /**
+         * #action
+         */
+        setContrastLettering(arg) {
+            self.contrastLettering = arg;
+        },
         /**
          * #action
          */
@@ -228,7 +280,7 @@ function stateModelFactory() {
          * #action
          */
         setWidth(arg) {
-            self.width = arg;
+            self.volatileWidth = arg;
         },
         /**
          * #action
@@ -315,11 +367,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);
             }
         },
         /**
@@ -364,6 +416,35 @@ function stateModelFactory() {
         setTreeMetadata(result) {
             self.data.setTreeMetadata(result);
         },
+    }))
+        .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 => ({
         /**
@@ -403,18 +484,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 [];
         },
         /**
@@ -432,12 +513,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;
         },
@@ -450,7 +529,7 @@ function stateModelFactory() {
         /**
          * #getter
          */
-        get _tree() {
+        get tree() {
             const ret = self.data.tree
                 ? generateNodeIds(parseNewick(self.data.tree))
                 : this.MSA?.getTree() || {
@@ -465,7 +544,7 @@ function stateModelFactory() {
          * #getter
          */
         get rowNames() {
-            return this.hierarchy.leaves().map(n => n.data.name);
+            return this.leaves.map(n => n.data.name);
         },
         /**
          * #getter
@@ -478,7 +557,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));
             if (self.showOnly) {
@@ -488,10 +569,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;
         },
         /**
@@ -511,34 +594,49 @@ 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);
-            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);
+                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)])
                 .filter((f) => !!f[1]);
         },
+        /**
+         * #getter
+         */
+        get rowMap() {
+            return new Map(this.rows);
+        },
         /**
          * #getter
          */
@@ -566,15 +664,24 @@ 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
@@ -594,6 +701,12 @@ function stateModelFactory() {
         get totalHeight() {
             return this.root.leaves().length * self.rowHeight;
         },
+        /**
+         * #getter
+         */
+        get leaves() {
+            return this.hierarchy.leaves();
+        },
     }))
         .views(self => ({
         /**
@@ -607,7 +720,7 @@ function stateModelFactory() {
         /**
          * #getter
          */
-        get initialized() {
+        get dataInitialized() {
             return (self.data.msa || self.data.tree) && !self.error;
         },
         /**
@@ -658,29 +771,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
@@ -724,9 +885,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);
                 }
             }
@@ -783,28 +944,42 @@ function stateModelFactory() {
         get turnedOnTracks() {
             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, position) {
-            const { rowNames, rows } = self;
-            const index = rowNames.indexOf(rowName);
-            if (index !== -1 && rows[index]) {
-                const row = rows[index][1];
-                let k = 0;
-                for (let i = 0; i < position; i++) {
-                    if (row[i] !== '-') {
-                        k++;
-                    }
-                    else if (k >= position) {
-                        break;
-                    }
-                }
-                return k;
+        mouseOverCoordToRowLetter(rowName, position) {
+            const { rowMap, blanks } = self;
+            return rowMap.get(rowName)?.[mouseOverCoordToGlobalCoord(blanks, position)];
+        },
+        /**
+         * #method
+         * return a row-specific sequence coordinate, skipping gaps, given a
+         * global coordinate
+         */
+        mouseOverCoordToGapRemovedRowCoord(rowName, position) {
+            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;
         },
         /**
          * #method
@@ -832,6 +1007,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)
@@ -842,20 +1026,21 @@ function stateModelFactory() {
         /**
          * #getter
          */
-        get tidyTypes() {
+        get tidyInterProAnnotationTypes() {
             const types = new Map();
-            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) {
@@ -879,19 +1064,36 @@ function stateModelFactory() {
         /**
          * #getter
          */
-        get tidyFilteredAnnotations() {
-            return this.tidyAnnotations.filter(r => self.featureFilters.get(r.accession));
+        get tidyFilteredInterProAnnotations() {
+            return this.tidyInterProAnnotations.filter(r => self.featureFilters.get(r.accession));
+        },
+        /**
+         * #getter
+         */
+        get tidyFilteredGatheredInterProAnnotations() {
+            return groupBy(this.tidyFilteredInterProAnnotations, r => r.id);
         },
+    }))
+        .views(self => ({
         /**
          * #getter
          */
-        get tidyFilteredGatheredAnnotations() {
-            return groupBy(this.tidyFilteredAnnotations, r => r.id);
+        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 = {};
             for (const key of arr) {
@@ -901,6 +1103,9 @@ function stateModelFactory() {
             }
             return map;
         },
+        /**
+         * #getter
+         */
         get strokePalette() {
             return Object.fromEntries(Object.entries(this.fillPalette).map(([key, val]) => [
                 key,
@@ -909,18 +1114,23 @@ function stateModelFactory() {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        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
@@ -955,7 +1165,7 @@ function stateModelFactory() {
         },
         afterCreate() {
             addDisposer(self, autorun(() => {
-                for (const key of self.tidyTypes.keys()) {
+                for (const key of self.tidyInterProAnnotationTypes.keys()) {
                     this.initFilter(key);
                 }
             }));
@@ -999,9 +1209,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);
@@ -1017,6 +1229,17 @@ 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, autorun(async () => {
                 if (self.treeWidthMatchesArea) {