react-msaview 2.1.1 → 2.1.3

package/dist/model.js

@@ -17,45 +17,144 @@ import parseNewick from './parseNewick';
 import colorSchemes from './colorSchemes';
 import { UniprotTrack } from './UniprotTrack';
 import { StructureModel } from './StructureModel';
-const MSAModel = types
-    .model('MsaView', {
+/**
+ * #stateModel MsaView
+ */
+function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+const model = types
+    .compose(BaseViewModel, types.model('MsaView', {
+    /**
+     * #property
+     */
     id: ElementId,
+    /**
+     * #property
+     */
     type: types.literal('MsaView'),
+    /**
+     * #property
+     */
     height: types.optional(types.number, 550),
+    /**
+     * #property
+     */
     treeAreaWidth: types.optional(types.number, 400),
+    /**
+     * #property
+     */
     treeWidth: types.optional(types.number, 300),
+    /**
+     * #property
+     */
     rowHeight: 20,
+    /**
+     * #property
+     */
     scrollY: 0,
+    /**
+     * #property
+     */
     scrollX: 0,
+    /**
+     * #property
+     */
     resizeHandleWidth: 5,
+    /**
+     * #property
+     */
     blockSize: 1000,
+    /**
+     * #property
+     */
     mouseRow: types.maybe(types.number),
+    /**
+     * #property
+     */
     mouseCol: types.maybe(types.number),
+    /**
+     * #property
+     */
     selectedStructures: types.array(StructureModel),
+    /**
+     * #property
+     */
     labelsAlignRight: false,
+    /**
+     * #property
+     */
     colWidth: 16,
+    /**
+     * #property
+     */
     showBranchLen: true,
+    /**
+     * #property
+     */
     bgColor: true,
+    /**
+     * #property
+     */
     drawTree: true,
+    /**
+     * #property
+     */
     drawNodeBubbles: true,
+    /**
+     * #property
+     */
     highResScaleFactor: 2,
+    /**
+     * #property
+     */
     colorSchemeName: 'maeditor',
+    /**
+     * #property
+     */
     treeFilehandle: types.maybe(FileLocation),
+    /**
+     * #property
+     */
     msaFilehandle: types.maybe(FileLocation),
+    /**
+     * #property
+     */
+    treeMetadataFilehandle: types.maybe(FileLocation),
+    /**
+     * #property
+     */
     currentAlignment: 0,
+    /**
+     * #property
+     */
     collapsed: types.array(types.string),
+    /**
+     * #property
+     */
     showOnly: types.maybe(types.string),
+    /**
+     * #property
+     */
     boxTracks: types.array(UniprotTrack),
+    /**
+     * #property
+     */
     turnedOffTracks: types.map(types.boolean),
+    /**
+     * #property
+     */
     annotatedRegions: types.array(types.model({
         start: types.number,
         end: types.number,
         attributes: types.frozen(),
     })),
+    /**
+     * #property
+     */
     data: types.optional(types
         .model({
         tree: types.maybe(types.string),
         msa: types.maybe(types.string),
+        treeMetadata: types.maybe(types.string),
     })
         .actions(self => ({
         setTree(tree) {
@@ -64,12 +163,18 @@ const MSAModel = types
         setMSA(msa) {
             self.msa = msa;
         },
+        setTreeMetadata(treeMetadata) {
+            self.treeMetadata = treeMetadata;
+        },
     })), { tree: '', msa: '' }),
-})
+}))
     .volatile(() => ({
     rulerHeight: 20,
     error: undefined,
-    margin: { left: 20, top: 20 },
+    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
@@ -78,23 +183,38 @@ const MSAModel = types
     annotPos: undefined,
 }))
     .actions(self => ({
+    /**
+     * #action
+     */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setDialogComponent(dlg, props) {
         self.DialogComponent = dlg;
         self.DialogProps = props;
     },
+    /**
+     * #action
+     */
     setHeight(height) {
         self.height = height;
     },
+    /**
+     * #action
+     */
     addStructureToSelection(elt) {
         self.selectedStructures.push(elt);
     },
+    /**
+     * #action
+     */
     removeStructureFromSelection(elt) {
         const r = self.selectedStructures.find(node => node.id === elt.id);
         if (r) {
             self.selectedStructures.remove(r);
         }
     },
+    /**
+     * #action
+     */
     toggleStructureSelection(elt) {
         const r = self.selectedStructures.find(node => node.id === elt.id);
         if (r) {
@@ -104,47 +224,88 @@ const MSAModel = types
             self.selectedStructures.push(elt);
         }
     },
+    /**
+     * #action
+     */
     clearSelectedStructures() {
-        // @ts-expect-error
-        self.selectedStructures = [];
+        self.selectedStructures = cast([]);
     },
+    /**
+     * #action
+     */
     setError(error) {
         self.error = error;
     },
+    /**
+     * #action
+     */
     setMousePos(col, row) {
         self.mouseCol = col;
         self.mouseRow = row;
     },
+    /**
+     * #action
+     */
     setRowHeight(n) {
         self.rowHeight = n;
     },
+    /**
+     * #action
+     */
     setColWidth(n) {
         self.colWidth = n;
     },
+    /**
+     * #action
+     */
     setColorSchemeName(name) {
         self.colorSchemeName = name;
     },
+    /**
+     * #action
+     */
     setScrollY(n) {
         self.scrollY = n;
     },
+    /**
+     * #action
+     */
     setScrollX(n) {
         self.scrollX = n;
     },
+    /**
+     * #action
+     */
     setTreeAreaWidth(n) {
         self.treeAreaWidth = n;
     },
+    /**
+     * #action
+     */
     setTreeWidth(n) {
         self.treeWidth = n;
     },
+    /**
+     * #action
+     */
     setCurrentAlignment(n) {
         self.currentAlignment = n;
     },
+    /**
+     * #action
+     */
     toggleLabelsAlignRight() {
         self.labelsAlignRight = !self.labelsAlignRight;
     },
+    /**
+     * #action
+     */
     toggleDrawTree() {
         self.drawTree = !self.drawTree;
     },
+    /**
+     * #action
+     */
     toggleCollapsed(node) {
         if (self.collapsed.includes(node)) {
             self.collapsed.remove(node);
@@ -153,24 +314,45 @@ const MSAModel = types
             self.collapsed.push(node);
         }
     },
+    /**
+     * #action
+     */
     setShowOnly(node) {
         self.showOnly = node;
     },
+    /**
+     * #action
+     */
     toggleBranchLen() {
         self.showBranchLen = !self.showBranchLen;
     },
+    /**
+     * #action
+     */
     toggleBgColor() {
         self.bgColor = !self.bgColor;
     },
+    /**
+     * #action
+     */
     toggleNodeBubbles() {
         self.drawNodeBubbles = !self.drawNodeBubbles;
     },
+    /**
+     * #action
+     */
     setData(data) {
         self.data = cast(data);
     },
+    /**
+     * #action
+     */
     async setMSAFilehandle(msaFilehandle) {
         self.msaFilehandle = msaFilehandle;
     },
+    /**
+     * #action
+     */
     async setTreeFilehandle(treeFilehandle) {
         if (treeFilehandle && 'blobId' in treeFilehandle) {
             const r = await openLocation(treeFilehandle).readFile('utf8');
@@ -180,12 +362,24 @@ const MSAModel = types
             self.treeFilehandle = treeFilehandle;
         }
     },
+    /**
+     * #action
+     */
     setMSA(result) {
         self.data.setMSA(result);
     },
+    /**
+     * #action
+     */
     setTree(result) {
         self.data.setTree(result);
     },
+    /**
+     * #action
+     */
+    setTreeMetadata(result) {
+        self.data.setTreeMetadata(result);
+    },
     afterCreate() {
         addDisposer(self, autorun(async () => {
             const { treeFilehandle } = self;
@@ -199,6 +393,18 @@ const MSAModel = types
                 }
             }
         }));
+        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) {
@@ -219,6 +425,9 @@ const MSAModel = types
     let oldValX = 0;
     let oldValY = 0;
     return {
+        /**
+         * #getter
+         */
         get initialized() {
             return ((self.data.msa ||
                 self.data.tree ||
@@ -226,6 +435,9 @@ const MSAModel = types
                 self.treeFilehandle) &&
                 !self.error);
         },
+        /**
+         * #getter
+         */
         get blocksX() {
             const { scrollX, blockSize: size, colWidth } = self;
             const ret = -(size * Math.floor(scrollX / size)) - size;
@@ -242,6 +454,9 @@ const MSAModel = types
             }
             return oldBlocksX;
         },
+        /**
+         * #getter
+         */
         get blocksY() {
             const { scrollY, blockSize: size, rowHeight } = self;
             const ret = -(size * Math.floor(scrollY / size)) - 2 * size;
@@ -261,19 +476,34 @@ const MSAModel = types
     };
 })
     .views(self => ({
+    /**
+     * #getter
+     */
     get blocks2d() {
         return self.blocksY.flatMap(by => self.blocksX.map(bx => [bx, by]));
     },
+    /**
+     * #getter
+     */
     get done() {
         return self.initialized && (self.data.msa || self.data.tree);
     },
+    /**
+     * #getter
+     */
     get colorScheme() {
         return colorSchemes[self.colorSchemeName];
     },
+    /**
+     * #getter
+     */
     get header() {
         var _a;
         return ((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getHeader()) || {};
     },
+    /**
+     * #method
+     */
     getRowData(name) {
         var _a;
         const matches = name.match(/\S+\/(\d+)-(\d+)/);
@@ -282,19 +512,40 @@ const MSAModel = types
             ...(matches && { range: { start: +matches[1], end: +matches[2] } }),
         };
     },
+    /**
+     * #getter
+     */
     get currentAlignmentName() {
         return this.alignmentNames[self.currentAlignment];
     },
+    /**
+     * #getter
+     */
     get alignmentNames() {
         var _a;
         return ((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.alignmentNames) || [];
     },
+    /**
+     * #getter
+     */
     get noTree() {
         return !!this.tree.noTree;
     },
+    /**
+     * #getter
+     */
     get menuItems() {
         return [];
     },
+    /**
+     * #getter
+     */
+    get treeMetadata() {
+        return self.data.treeMetadata ? JSON.parse(self.data.treeMetadata) : {};
+    },
+    /**
+     * #getter
+     */
     get MSA() {
         const text = self.data.msa;
         if (text) {
@@ -310,10 +561,16 @@ const MSAModel = types
         }
         return null;
     },
+    /**
+     * #getter
+     */
     get numColumns() {
         var _a;
         return ((((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getWidth()) || 0) - this.blanks.length) * self.colWidth;
     },
+    /**
+     * #getter
+     */
     get tree() {
         var _a;
         return self.data.tree
@@ -325,17 +582,28 @@ const MSAModel = types
                 name: 'empty',
             };
     },
+    /**
+     * #getter
+     */
     get rowNames() {
         return this.hierarchy.leaves().map(node => node.data.name);
     },
-    get mouseOverRowName() {
+    /**
+     * #getter
+     */ get mouseOverRowName() {
         return self.mouseRow !== undefined
             ? this.rowNames[self.mouseRow]
             : undefined;
     },
+    /**
+     * #method
+     */
     getMouseOverResidue(rowName) {
         return this.columns[rowName];
     },
+    /**
+     * #getter
+     */
     get root() {
         let hier = hierarchy(this.tree, d => d.branchset)
             .sum(d => (d.branchset ? 0 : 1))
@@ -354,17 +622,28 @@ const MSAModel = types
         }
         return hier;
     },
+    /**
+     * #getter
+     */
     get structures() {
         var _a;
         return ((_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getStructures()) || {};
     },
+    /**
+     * #getter
+     */
     get inverseStructures() {
         return Object.fromEntries(Object.entries(this.structures).flatMap(([key, val]) => val.map(pdbEntry => [pdbEntry.pdb, { id: key }])));
     },
+    /**
+     * #getter
+     */
     get msaAreaWidth() {
-        // @ts-expect-error
         return self.width - self.treeAreaWidth;
     },
+    /**
+     * #getter
+     */
     get blanks() {
         var _a;
         const blanks = [];
@@ -385,18 +664,30 @@ const MSAModel = types
         }
         return blanks;
     },
+    /**
+     * #getter
+     */
     get rows() {
         return this.hierarchy
             .leaves()
             .map(({ data }) => { var _a; return [data.name, (_a = this.MSA) === null || _a === void 0 ? void 0 : _a.getRow(data.name)]; })
             .filter((f) => !!f[1]);
     },
+    /**
+     * #getter
+     */
     get columns() {
         return Object.fromEntries(this.rows.map((row, index) => [row[0], this.columns2d[index]]));
     },
+    /**
+     * #getter
+     */
     get columns2d() {
         return this.rows.map(r => r[1]).map(str => skipBlanks(this.blanks, str));
     },
+    /**
+     * #getter
+     */
     get colStats() {
         const r = [];
         const columns = this.columns2d;
@@ -412,7 +703,10 @@ const MSAModel = types
         }
         return r;
     },
-    // generates a new tree that is clustered with x,y positions
+    /**
+     * #getter
+     * generates a new tree that is clustered with x,y positions
+     */
     get hierarchy() {
         const root = this.root;
         const clust = cluster()
@@ -422,11 +716,17 @@ const MSAModel = types
         setBrLength(root, (root.data.length = 0), self.treeWidth / maxLength(root));
         return root;
     },
+    /**
+     * #getter
+     */
     get totalHeight() {
         return this.root.leaves().length * self.rowHeight;
     },
 }))
     .actions(self => ({
+    /**
+     * #action
+     */
     addUniprotTrack(node) {
         if (self.boxTracks.some(t => t.name === node.name)) {
             if (self.turnedOffTracks.has(node.name)) {
@@ -441,12 +741,21 @@ const MSAModel = types
             });
         }
     },
+    /**
+     * #action
+     */
     doScrollY(deltaY) {
         self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0);
     },
+    /**
+     * #action
+     */
     doScrollX(deltaX) {
         self.scrollX = clamp(-self.numColumns + (self.msaAreaWidth - 100), self.scrollX + deltaX, 0);
     },
+    /**
+     * #action
+     */
     setMouseoveredColumn(n, chain, file) {
         var _a;
         let j = 0;
@@ -465,6 +774,9 @@ const MSAModel = types
             self.mouseCol = undefined;
         }
     },
+    /**
+     * #action
+     */
     toggleTrack(id) {
         if (self.turnedOffTracks.has(id)) {
             self.turnedOffTracks.delete(id);
@@ -475,14 +787,23 @@ const MSAModel = types
     },
 }))
     .views(self => ({
+    /**
+     * #getter
+     */
     get secondaryStructureConsensus() {
         var _a;
         return (_a = self.MSA) === null || _a === void 0 ? void 0 : _a.secondaryStructureConsensus;
     },
+    /**
+     * #getter
+     */
     get seqConsensus() {
         var _a;
         return (_a = self.MSA) === null || _a === void 0 ? void 0 : _a.seqConsensus;
     },
+    /**
+     * #getter
+     */
     get conservation() {
         if (self.columns2d.length) {
             for (let i = 0; i < self.columns2d[0].length; i++) {
@@ -494,6 +815,9 @@ const MSAModel = types
         }
         return ['a'];
     },
+    /**
+     * #getter
+     */
     get tracks() {
         const blanks = self.blanks;
         const adapterTracks = self.MSA
@@ -551,13 +875,22 @@ const MSAModel = types
             : [];
         return [...adapterTracks, ...boxTracks, ...annotationTracks];
     },
+    /**
+     * #getter
+     */
     get turnedOnTracks() {
         return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id));
     },
-    // returns coordinate in the current relative coordinate scheme
+    /**
+     * #method
+     * returns coordinate in the current relative coordinate scheme
+     */
     pxToBp(coord) {
         return Math.floor((coord - self.scrollX) / self.colWidth);
     },
+    /**
+     * #method
+     */
     rowSpecificBpToPx(rowName, position) {
         var _a;
         const { rowNames, rows, blanks } = self;
@@ -566,6 +899,7 @@ const MSAModel = types
         const details = self.getRowData(rowName);
         const offset = ((_a = details.range) === null || _a === void 0 ? void 0 : _a.start) || 0;
         const current = position - offset;
+        const s = new Set(self.blanks);
         if (current < 0) {
             return 0;
         }
@@ -578,22 +912,29 @@ const MSAModel = types
         }
         let count = 0;
         for (let k = 0; k < row.length; k++) {
-            if (blanks.includes(k) && k < i + 1) {
+            if (s.has(k) && k < i + 1) {
                 count++;
             }
         }
         return i - count;
     },
+    /**
+     * #method
+     */
     globalBpToPx(position) {
         var _a;
         let count = 0;
+        const s = new Set(self.blanks);
         for (let k = 0; k < ((_a = self.rows[0]) === null || _a === void 0 ? void 0 : _a[1].length); k++) {
-            if (self.blanks.includes(k) && k < position + 1) {
+            if (s.has(k) && k < position + 1) {
                 count++;
             }
         }
         return position - count;
     },
+    /**
+     * #method
+     */
     relativePxToBp(rowName, position) {
         const { rowNames, rows } = self;
         const index = rowNames.indexOf(rowName);
@@ -612,6 +953,9 @@ const MSAModel = types
         }
         return 0;
     },
+    /**
+     * #method
+     */
     getPos(pos) {
         let j = 0;
         for (let i = 0, k = 0; i < pos; i++, j++) {
@@ -624,6 +968,9 @@ const MSAModel = types
     },
 }))
     .actions(self => ({
+    /**
+     * #action
+     */
     addAnnotation(start, end, attributes) {
         self.annotatedRegions.push({
             start: self.getPos(start),
@@ -631,28 +978,33 @@ const MSAModel = types
             attributes,
         });
     },
-    setOffsets(left, right) {
+    /**
+     * #action
+     */
+    setAnnotationClickBoundaries(left, right) {
         self.annotPos = { left, right };
     },
-    clearAnnotPos() {
+    /**
+     * #action
+     */
+    clearAnnotationClickBoundaries() {
         self.annotPos = undefined;
     },
-}));
-const model = types.snapshotProcessor(types.compose(BaseViewModel, MSAModel), {
-    postProcessor(result) {
-        const snap = result;
-        const { data: { tree, msa }, ...rest } = snap;
-        // remove the MSA/tree data from the tree if the filehandle available in
-        // which case it can be reloaded on refresh
-        return {
-            data: {
-                // https://andreasimonecosta.dev/posts/the-shortest-way-to-conditionally-insert-properties-into-an-object-literal/
-                ...(!result.treeFilehandle && { tree }),
-                ...(!result.msaFilehandle && { msa }),
-            },
-            ...rest,
-        };
-    },
+}))
+    .postProcessSnapshot(result => {
+    const snap = result;
+    const { data: { tree, msa, treeMetadata }, ...rest } = snap;
+    // remove the MSA/tree data from the tree if the filehandle available in
+    // which case it can be reloaded on refresh
+    return {
+        data: {
+            // https://andreasimonecosta.dev/posts/the-shortest-way-to-conditionally-insert-properties-into-an-object-literal/
+            ...(!result.treeFilehandle && { tree }),
+            ...(!result.msaFilehandle && { msa }),
+            ...(!result.treeMetadataFilehandle && { treeMetadata }),
+        },
+        ...rest,
+    };
 });
 export default model;
 //# sourceMappingURL=model.js.map