react-msaview 3.0.0 → 3.0.1

package/dist/model.js

@@ -2,13 +2,14 @@ import { autorun } from 'mobx';
 import { cast, types, addDisposer } from 'mobx-state-tree';
 import { hierarchy, cluster } from 'd3-hierarchy';
 import { ascending } from 'd3-array';
+import Stockholm from 'stockholm-js';
+// jbrowse
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst';
 import { openLocation } from '@jbrowse/core/util/io';
-import { measureText, sum } from '@jbrowse/core/util';
+import { measureText, notEmpty, sum } from '@jbrowse/core/util';
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-import Stockholm from 'stockholm-js';
 // locals
-import { collapse, generateNodeIds, maxLength, setBrLength, skipBlanks, clamp, } from './util';
+import { clamp, collapse, filterHiddenLeafNodes, generateNodeIds, maxLength, setBrLength, skipBlanks, } from './util';
 import TextTrack from './components/TextTrack';
 import BoxTrack from './components/BoxTrack';
 import ClustalMSA from './parsers/ClustalMSA';
@@ -21,140 +22,157 @@ import { StructureModel } from './StructureModel';
 import { DialogQueueSessionMixin } from './DialogQueue';
 /**
  * #stateModel MsaView
+ * extends
+ * - BaseViewModel
+ * - DialogQueueSessionMixin
  */
 function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
 const model = types
     .compose(BaseViewModel, DialogQueueSessionMixin(), types.model('MsaView', {
     /**
      * #property
+     * id of view, randomly generated if not provided
      */
     id: ElementId,
     /**
      * #property
+     * hardcoded view type
      */
     type: types.literal('MsaView'),
     /**
      * #property
+     * height of the div containing the view, px
      */
     height: types.optional(types.number, 550),
     /**
      * #property
+     * width of the area the tree is drawn in, px
      */
     treeAreaWidth: types.optional(types.number, 400),
     /**
      * #property
+     * width of the tree within the treeArea, px
      */
     treeWidth: types.optional(types.number, 300),
     /**
      * #getter
+     * synchronization that matches treeWidth to treeAreaWidth
      */
     treeWidthMatchesArea: true,
     /**
      * #property
+     * height of each row, px
      */
     rowHeight: 20,
     /**
      * #property
+     * scroll position, Y-offset, px
      */
     scrollY: 0,
     /**
      * #property
+     * scroll position, X-offset, px
      */
     scrollX: 0,
     /**
      * #property
-     */
-    resizeHandleWidth: 5,
-    /**
-     * #property
-     */
-    blockSize: 1000,
-    /**
-     * #property
-     */
-    mouseRow: types.maybe(types.number),
-    /**
-     * #property
-     */
-    mouseCol: types.maybe(types.number),
-    /**
-     * #property
+     * currently "selected" structures, generally PDB 3-D protein structures
      */
     selectedStructures: types.array(StructureModel),
     /**
      * #property
+     * right-align the labels
      */
     labelsAlignRight: false,
     /**
      * #property
+     * width of columns, px
      */
     colWidth: 16,
     /**
      * #property
+     * use "branch length" e.g. evolutionary distance to draw tree branch
+     * lengths. if false, the layout is a "cladogram" that does not take into
+     * account evolutionary distances
      */
     showBranchLen: true,
     /**
      * #property
+     * draw MSA tiles with a background color
      */
     bgColor: true,
     /**
      * #property
+     * draw tree, boolean
      */
     drawTree: true,
     /**
      * #property
+     * draw clickable node bubbles on the tree
      */
     drawNodeBubbles: true,
     /**
      * #property
+     * high resolution scale factor, helps make canvas look better on hi-dpi
+     * screens
      */
     highResScaleFactor: 2,
     /**
      * #property
+     * default color scheme name
      */
     colorSchemeName: 'maeditor',
     /**
      * #property
+     * filehandle object for the tree
      */
     treeFilehandle: types.maybe(FileLocation),
     /**
      * #property
+     * filehandle object for the MSA (which could contain a tree e.g. with
+     * stockholm files)
      */
     msaFilehandle: types.maybe(FileLocation),
     /**
      * #property
+     * filehandle object for tree metadata
      */
     treeMetadataFilehandle: types.maybe(FileLocation),
     /**
      * #property
+     *
      */
     currentAlignment: 0,
     /**
      * #property
+     * array of tree nodes that are 'collapsed'
      */
     collapsed: types.array(types.string),
     /**
      * #property
+     * array of leaf nodes that are 'hidden', similar to collapsed but for leaf nodes
      */
-    showOnly: types.maybe(types.string),
+    hidden: types.array(types.string),
     /**
      * #property
+     * focus on particular subtree
      */
-    boxTracks: types.array(UniprotTrack),
+    showOnly: types.maybe(types.string),
     /**
      * #property
+     * a list of "tracks" to display, as box-like glyphs (e.g. protein
+     * domains)
      */
-    turnedOffTracks: types.map(types.boolean),
+    boxTracks: types.array(UniprotTrack),
     /**
      * #property
+     * turned off tracks
      */
-    annotatedRegions: types.array(types.model({
-        start: types.number,
-        end: types.number,
-        attributes: types.frozen(),
-    })),
+    turnedOffTracks: types.map(types.boolean),
     /**
      * #property
+     * data from the loaded tree/msa/treeMetadata, generally loaded by
+     * autorun
      */
     data: types.optional(types
         .model({
@@ -175,6 +193,26 @@ const model = types
     })), { tree: '', msa: '' }),
 }))
     .volatile(() => ({
+    /**
+     * #volatile
+     * resize handle width between tree and msa area, px
+     */
+    resizeHandleWidth: 5,
+    /**
+     * #volatile
+     * size of blocks of content to be drawn, px
+     */
+    blockSize: 1000,
+    /**
+     * #volatile
+     * the currently mouse-hovered row
+     */
+    mouseRow: undefined,
+    /**
+     * #volatile
+     * the currently mouse-hovered column
+     */
+    mouseCol: undefined,
     /**
      * #volatile
      * a dummy variable that is incremented when ref changes so autorun for
@@ -204,18 +242,21 @@ const model = types
     .actions(self => ({
     /**
      * #action
+     * set the height of the view in px
      */
     setHeight(height) {
         self.height = height;
     },
     /**
      * #action
+     * add to the selected structures
      */
     addStructureToSelection(elt) {
         self.selectedStructures.push(elt);
     },
     /**
      * #action
+     * remove from the selected structures
      */
     removeStructureFromSelection(elt) {
         const r = self.selectedStructures.find(node => node.id === elt.id);
@@ -225,6 +266,7 @@ const model = types
     },
     /**
      * #action
+     * toggle a structure from the selected structures list
      */
     toggleStructureSelection(elt) {
         const r = self.selectedStructures.find(node => node.id === elt.id);
@@ -237,18 +279,21 @@ const model = types
     },
     /**
      * #action
+     * clear all selected structures
      */
     clearSelectedStructures() {
         self.selectedStructures = cast([]);
     },
     /**
      * #action
+     * set error state
      */
     setError(error) {
         self.error = error;
     },
     /**
      * #action
+     * set mouse position (row, column) in the MSA
      */
     setMousePos(col, row) {
         self.mouseCol = col;
@@ -256,48 +301,56 @@ const model = types
     },
     /**
      * #action
+     * set row height (px)
      */
     setRowHeight(n) {
         self.rowHeight = n;
     },
     /**
      * #action
+     * set col width (px)
      */
     setColWidth(n) {
         self.colWidth = n;
     },
     /**
      * #action
+     * set color scheme name
      */
     setColorSchemeName(name) {
         self.colorSchemeName = name;
     },
     /**
      * #action
+     * synchronize the treewidth and treeareawidth
      */
     setTreeWidthMatchesArea(arg) {
         self.treeWidthMatchesArea = arg;
     },
     /**
      * #action
+     * set scroll Y-offset (px)
      */
     setScrollY(n) {
         self.scrollY = n;
     },
     /**
      * #action
+     * set tree area width (px)
      */
     setTreeAreaWidth(n) {
         self.treeAreaWidth = n;
     },
     /**
      * #action
+     * set tree width (px)
      */
     setTreeWidth(n) {
         self.treeWidth = n;
     },
     /**
      * #action
+     *
      */
     setCurrentAlignment(n) {
         self.currentAlignment = n;
@@ -314,6 +367,18 @@ const model = types
     setDrawTree(arg) {
         self.drawTree = arg;
     },
+    /**
+     * #action
+     */
+    hideNode(arg) {
+        self.hidden.push(arg);
+    },
+    /**
+     * #action
+     */
+    clearHidden() {
+        self.hidden.clear();
+    },
     /**
      * #action
      */
@@ -482,7 +547,12 @@ const model = types
         const matches = name.match(/\S+\/(\d+)-(\d+)/);
         return {
             data: ((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getRowData(name)) || {},
-            ...(matches && { range: { start: +matches[1], end: +matches[2] } }),
+            ...(matches && {
+                range: {
+                    start: +matches[1],
+                    end: +matches[2],
+                },
+            }),
         };
     },
     /**
@@ -502,7 +572,7 @@ const model = types
      * #getter
      */
     get noTree() {
-        return !!this.tree.noTree;
+        return !!this._tree.noTree;
     },
     /**
      * #getter
@@ -544,7 +614,7 @@ const model = types
     /**
      * #getter
      */
-    get tree() {
+    get _tree() {
         var _a;
         return self.data.tree
             ? generateNodeIds(parseNewick(self.data.tree))
@@ -563,7 +633,8 @@ const model = types
     },
     /**
      * #getter
-     */ get mouseOverRowName() {
+     */
+    get mouseOverRowName() {
         return self.mouseRow !== undefined
             ? this.rowNames[self.mouseRow]
             : undefined;
@@ -578,7 +649,7 @@ const model = types
      * #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) {
@@ -590,9 +661,15 @@ const model = types
         if (self.collapsed.length) {
             self.collapsed
                 .map(collapsedId => hier.find(node => node.data.id === collapsedId))
-                .filter((f) => !!f)
+                .filter(notEmpty)
                 .map(node => collapse(node));
         }
+        if (self.hidden.length) {
+            self.hidden
+                .map(hiddenId => hier.find(node => node.data.id === hiddenId))
+                .filter(notEmpty)
+                .map(node => filterHiddenLeafNodes(node.parent, node.id));
+        }
         return hier;
     },
     /**
@@ -610,6 +687,7 @@ const model = types
     },
     /**
      * #getter
+     * widget width minus the tree area gives the space for the MSA
      */
     get msaAreaWidth() {
         return self.width - self.treeAreaWidth;
@@ -622,7 +700,7 @@ const model = types
         const blanks = [];
         const strs = this.hierarchy
             .leaves()
-            .map(({ data }) => { var _a; return (_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getRow(data.name); })
+            .map(leaf => { var _a; return (_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getRow(leaf.data.name); })
             .filter((item) => !!item);
         for (let i = 0; i < ((_a = strs[0]) === null || _a === void 0 ? void 0 : _a.length); i++) {
             let counter = 0;
@@ -641,9 +719,10 @@ const model = types
      * #getter
      */
     get rows() {
+        const MSA = this.MSA;
         return this.hierarchy
             .leaves()
-            .map(({ data }) => { var _a; return [data.name, (_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getRow(data.name)]; })
+            .map(leaf => [leaf.data.name, MSA === null || MSA === void 0 ? void 0 : MSA.getRow(leaf.data.name)])
             .filter((f) => !!f[1]);
     },
     /**
@@ -687,13 +766,13 @@ const model = types
      * generates a new tree that is clustered with x,y positions
      */
     get hierarchy() {
-        const root = this.root;
+        const r = this.root;
         const clust = cluster()
             .size([this.totalHeight, self.treeWidth])
             .separation(() => 1);
-        clust(root);
-        setBrLength(root, (root.data.length = 0), self.treeWidth / maxLength(root));
-        return root;
+        clust(r);
+        setBrLength(r, (r.data.length = 0), self.treeWidth / maxLength(r));
+        return r;
     },
     /**
      * #getter
@@ -781,9 +860,7 @@ const model = types
         const { rowHeight, hierarchy, treeMetadata, fontSize } = self;
         if (rowHeight > 5) {
             for (const node of hierarchy.leaves()) {
-                const { data: { name }, } = node;
-                const displayName = ((_a = treeMetadata[name]) === null || _a === void 0 ? void 0 : _a.genome) || name;
-                x = Math.max(measureText(displayName, fontSize), x);
+                x = Math.max(measureText(((_a = treeMetadata[node.data.name]) === null || _a === void 0 ? void 0 : _a.genome) || node.data.name, fontSize), x);
             }
         }
         return x;
@@ -819,62 +896,33 @@ const model = types
     /**
      * #getter
      */
-    get tracks() {
-        const blanks = self.blanks;
-        const adapterTracks = self.MSA
-            ? self.MSA.tracks.map(track => {
-                const { data } = track;
-                return {
-                    model: {
-                        ...track,
-                        data: data ? skipBlanks(blanks, data) : undefined,
-                        height: self.rowHeight,
-                    },
-                    ReactComponent: TextTrack,
-                };
-            })
-            : [];
-        const boxTracks = self.boxTracks
-            // filter out tracks that are associated with hidden rows
-            .filter(track => !!self.rows.some(row => row[0] === track.name))
+    get adapterTrackModels() {
+        var _a;
+        return (((_a = self.MSA) === null || _a === void 0 ? void 0 : _a.tracks.map(t => ({
+            model: {
+                ...t,
+                data: t.data ? skipBlanks(self.blanks, t.data) : undefined,
+                height: self.rowHeight,
+            },
+            ReactComponent: TextTrack,
+        }))) || []);
+    },
+    /**
+     * #getter
+     */
+    get boxTrackModels() {
+        return self.boxTracks
+            .filter(track => self.rows.some(row => row[0] === track.name))
             .map(track => ({
             model: track,
             ReactComponent: BoxTrack,
         }));
-        const annotationTracks = self.annotatedRegions.length > 0
-            ? [
-                {
-                    model: {
-                        features: self.annotatedRegions,
-                        height: 100,
-                        id: 'annotations',
-                        name: 'User-created annotations',
-                        data: self.annotatedRegions
-                            .map(region => {
-                            const attrs = region.attributes
-                                ? Object.entries(region.attributes)
-                                    .map(([k, v]) => `${k}=${v.join(',')}`)
-                                    .join(';')
-                                : '.';
-                            return [
-                                'MSA_refcoord',
-                                '.',
-                                '.',
-                                region.start,
-                                region.end,
-                                '.',
-                                '.',
-                                '.',
-                                attrs,
-                            ].join('\t');
-                        })
-                            .join('\n'),
-                    },
-                    ReactComponent: BoxTrack,
-                },
-            ]
-            : [];
-        return [...adapterTracks, ...boxTracks, ...annotationTracks];
+    },
+    /**
+     * #getter
+     */
+    get tracks() {
+        return [...this.adapterTrackModels, ...this.boxTrackModels];
     },
     /**
      * #getter
@@ -954,6 +1002,28 @@ const model = types
         }
         return 0;
     },
+    /**
+     * #method
+     */
+    relativePxToBp2(rowName, position) {
+        const { rowNames, rows } = self;
+        const index = rowNames.indexOf(rowName);
+        if (index !== -1) {
+            const row = rows[index][1];
+            let k = 0;
+            let i = 0;
+            for (; k < position; i++) {
+                if (row[i] !== '-') {
+                    k++;
+                }
+                else if (k >= position) {
+                    break;
+                }
+            }
+            return i;
+        }
+        return 0;
+    },
     /**
      * #method
      */
@@ -967,47 +1037,26 @@ const model = types
         }
         return j;
     },
-}))
-    .actions(self => ({
-    /**
-     * #action
-     */
-    addAnnotation(start, end, attributes) {
-        self.annotatedRegions.push({
-            start: self.getPos(start),
-            end: self.getPos(end),
-            attributes,
-        });
-    },
-    /**
-     * #action
-     */
-    setAnnotationClickBoundaries(left, right) {
-        self.annotPos = { left, right };
-    },
-    /**
-     * #action
-     */
-    clearAnnotationClickBoundaries() {
-        self.annotPos = undefined;
-    },
-    /**
-     * #action
-     */
-    incrementRef() {
-        self.nref++;
-    },
 }))
     .views(self => ({
     /**
      * #getter
+     * total height of track area (px)
      */
     get totalTrackAreaHeight() {
         return sum(self.turnedOnTracks.map(r => r.model.height));
     },
 }))
     .actions(self => ({
+    /**
+     * #action
+     * internal, used for drawing to canvas
+     */
+    incrementRef() {
+        self.nref++;
+    },
     afterCreate() {
+        // autorun opens treeFilehandle
         addDisposer(self, autorun(async () => {
             const { treeFilehandle } = self;
             if (treeFilehandle) {
@@ -1020,6 +1069,7 @@ const model = types
                 }
             }
         }));
+        // autorun opens treeMetadataFilehandle
         addDisposer(self, autorun(async () => {
             const { treeMetadataFilehandle } = self;
             if (treeMetadataFilehandle) {
@@ -1032,6 +1082,7 @@ const model = types
                 }
             }
         }));
+        // autorun opens msaFilehandle
         addDisposer(self, autorun(async () => {
             const { msaFilehandle } = self;
             if (msaFilehandle) {
@@ -1044,6 +1095,7 @@ const model = types
                 }
             }
         }));
+        // autorun synchronizes treeWidth with treeAreaWidth
         addDisposer(self, autorun(async () => {
             if (self.treeWidthMatchesArea) {
                 self.setTreeWidth(Math.max(50, self.treeAreaWidth - self.labelsWidth - 20));