react-msaview 2.1.5 → 3.0.1

package/dist/model.js

@@ -1,13 +1,15 @@
+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 { autorun } from 'mobx';
+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';
@@ -17,138 +19,160 @@ import parseNewick from './parseNewick';
 import colorSchemes from './colorSchemes';
 import { UniprotTrack } from './UniprotTrack';
 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, types.model('MsaView', {
+    .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({
@@ -169,42 +193,70 @@ const model = types
     })), { tree: '', msa: '' }),
 }))
     .volatile(() => ({
-    rulerHeight: 20,
+    /**
+     * #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
+     * drawing canvas commands will run
+     */
+    nref: 0,
+    /**
+     * #volatile
+     */
+    minimapHeight: 56,
+    /**
+     * #volatile
+     */
     error: undefined,
+    /**
+     * #volatile
+     */
     margin: {
         left: 20,
         top: 20,
     },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    DialogComponent: undefined,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    DialogProps: undefined,
-    // annotations
+    /**
+     * #volatile
+     */
     annotPos: undefined,
 }))
     .actions(self => ({
     /**
      * #action
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setDialogComponent(dlg, props) {
-        self.DialogComponent = dlg;
-        self.DialogProps = props;
-    },
-    /**
-     * #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);
@@ -214,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);
@@ -226,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;
@@ -245,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
      */
-    setScrollY(n) {
-        self.scrollY = n;
+    setTreeWidthMatchesArea(arg) {
+        self.treeWidthMatchesArea = arg;
     },
     /**
      * #action
+     * set scroll Y-offset (px)
      */
-    setScrollX(n) {
-        self.scrollX = n;
+    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;
@@ -294,14 +358,26 @@ const model = types
     /**
      * #action
      */
-    toggleLabelsAlignRight() {
-        self.labelsAlignRight = !self.labelsAlignRight;
+    setLabelsAlignRight(arg) {
+        self.labelsAlignRight = arg;
+    },
+    /**
+     * #action
+     */
+    setDrawTree(arg) {
+        self.drawTree = arg;
     },
     /**
      * #action
      */
-    toggleDrawTree() {
-        self.drawTree = !self.drawTree;
+    hideNode(arg) {
+        self.hidden.push(arg);
+    },
+    /**
+     * #action
+     */
+    clearHidden() {
+        self.hidden.clear();
     },
     /**
      * #action
@@ -323,20 +399,20 @@ const model = types
     /**
      * #action
      */
-    toggleBranchLen() {
-        self.showBranchLen = !self.showBranchLen;
+    setShowBranchLen(arg) {
+        self.showBranchLen = arg;
     },
     /**
      * #action
      */
-    toggleBgColor() {
-        self.bgColor = !self.bgColor;
+    setBgColor(arg) {
+        self.bgColor = arg;
     },
     /**
      * #action
      */
-    toggleNodeBubbles() {
-        self.drawNodeBubbles = !self.drawNodeBubbles;
+    setDrawNodeBubbles(arg) {
+        self.drawNodeBubbles = arg;
     },
     /**
      * #action
@@ -380,44 +456,6 @@ const model = types
     setTreeMetadata(result) {
         self.data.setTreeMetadata(result);
     },
-    afterCreate() {
-        addDisposer(self, autorun(async () => {
-            const { treeFilehandle } = self;
-            if (treeFilehandle) {
-                try {
-                    this.setTree(await openLocation(treeFilehandle).readFile('utf8'));
-                }
-                catch (e) {
-                    console.error(e);
-                    this.setError(e);
-                }
-            }
-        }));
-        addDisposer(self, autorun(async () => {
-            const { treeMetadataFilehandle } = self;
-            if (treeMetadataFilehandle) {
-                try {
-                    this.setTreeMetadata(await openLocation(treeMetadataFilehandle).readFile('utf8'));
-                }
-                catch (e) {
-                    console.error(e);
-                    this.setError(e);
-                }
-            }
-        }));
-        addDisposer(self, autorun(async () => {
-            const { msaFilehandle } = self;
-            if (msaFilehandle) {
-                try {
-                    this.setMSA(await openLocation(msaFilehandle).readFile('utf8'));
-                }
-                catch (e) {
-                    console.error(e);
-                    this.setError(e);
-                }
-            }
-        }));
-    },
 }))
     .views(self => {
     let oldBlocksX = [];
@@ -509,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],
+                },
+            }),
         };
     },
     /**
@@ -529,7 +572,7 @@ const model = types
      * #getter
      */
     get noTree() {
-        return !!this.tree.noTree;
+        return !!this._tree.noTree;
     },
     /**
      * #getter
@@ -566,12 +609,12 @@ const model = types
      */
     get numColumns() {
         var _a;
-        return ((((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getWidth()) || 0) - this.blanks.length) * self.colWidth;
+        return (((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getWidth()) || 0) - this.blanks.length;
     },
     /**
      * #getter
      */
-    get tree() {
+    get _tree() {
         var _a;
         return self.data.tree
             ? generateNodeIds(parseNewick(self.data.tree))
@@ -590,7 +633,8 @@ const model = types
     },
     /**
      * #getter
-     */ get mouseOverRowName() {
+     */
+    get mouseOverRowName() {
         return self.mouseRow !== undefined
             ? this.rowNames[self.mouseRow]
             : undefined;
@@ -605,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) {
@@ -617,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;
     },
     /**
@@ -637,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;
@@ -649,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;
@@ -668,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]);
     },
     /**
@@ -685,6 +737,12 @@ const model = types
     get columns2d() {
         return this.rows.map(r => r[1]).map(str => skipBlanks(this.blanks, str));
     },
+    /**
+     * #getter
+     */
+    get fontSize() {
+        return Math.max(8, self.rowHeight - 8);
+    },
     /**
      * #getter
      */
@@ -708,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
@@ -751,7 +809,13 @@ const model = types
      * #action
      */
     doScrollX(deltaX) {
-        self.scrollX = clamp(-self.numColumns + (self.msaAreaWidth - 100), self.scrollX + deltaX, 0);
+        self.scrollX = clamp(-(self.numColumns * self.colWidth) + (self.msaAreaWidth - 100), self.scrollX + deltaX, 0);
+    },
+    /**
+     * #action
+     */
+    setScrollX(n) {
+        self.scrollX = clamp(-(self.numColumns * self.colWidth) + (self.msaAreaWidth - 100), n, 0);
     },
     /**
      * #action
@@ -787,6 +851,20 @@ const model = types
     },
 }))
     .views(self => ({
+    /**
+     * #getter
+     */
+    get labelsWidth() {
+        var _a;
+        let x = 0;
+        const { rowHeight, hierarchy, treeMetadata, fontSize } = self;
+        if (rowHeight > 5) {
+            for (const node of hierarchy.leaves()) {
+                x = Math.max(measureText(((_a = treeMetadata[node.data.name]) === null || _a === void 0 ? void 0 : _a.genome) || node.data.name, fontSize), x);
+            }
+        }
+        return x;
+    },
     /**
      * #getter
      */
@@ -818,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
@@ -953,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,28 +1038,69 @@ const model = types
         return j;
     },
 }))
-    .actions(self => ({
+    .views(self => ({
     /**
-     * #action
+     * #getter
+     * total height of track area (px)
      */
-    addAnnotation(start, end, attributes) {
-        self.annotatedRegions.push({
-            start: self.getPos(start),
-            end: self.getPos(end),
-            attributes,
-        });
+    get totalTrackAreaHeight() {
+        return sum(self.turnedOnTracks.map(r => r.model.height));
     },
+}))
+    .actions(self => ({
     /**
      * #action
+     * internal, used for drawing to canvas
      */
-    setAnnotationClickBoundaries(left, right) {
-        self.annotPos = { left, right };
+    incrementRef() {
+        self.nref++;
     },
-    /**
-     * #action
-     */
-    clearAnnotationClickBoundaries() {
-        self.annotPos = undefined;
+    afterCreate() {
+        // autorun opens treeFilehandle
+        addDisposer(self, autorun(async () => {
+            const { treeFilehandle } = self;
+            if (treeFilehandle) {
+                try {
+                    self.setTree(await openLocation(treeFilehandle).readFile('utf8'));
+                }
+                catch (e) {
+                    console.error(e);
+                    self.setError(e);
+                }
+            }
+        }));
+        // autorun opens treeMetadataFilehandle
+        addDisposer(self, autorun(async () => {
+            const { treeMetadataFilehandle } = self;
+            if (treeMetadataFilehandle) {
+                try {
+                    self.setTreeMetadata(await openLocation(treeMetadataFilehandle).readFile('utf8'));
+                }
+                catch (e) {
+                    console.error(e);
+                    self.setError(e);
+                }
+            }
+        }));
+        // autorun opens msaFilehandle
+        addDisposer(self, autorun(async () => {
+            const { msaFilehandle } = self;
+            if (msaFilehandle) {
+                try {
+                    self.setMSA(await openLocation(msaFilehandle).readFile('utf8'));
+                }
+                catch (e) {
+                    console.error(e);
+                    self.setError(e);
+                }
+            }
+        }));
+        // autorun synchronizes treeWidth with treeAreaWidth
+        addDisposer(self, autorun(async () => {
+            if (self.treeWidthMatchesArea) {
+                self.setTreeWidth(Math.max(50, self.treeAreaWidth - self.labelsWidth - 20));
+            }
+        }));
     },
 }))
     .postProcessSnapshot(result => {