react-msaview 3.0.0 → 3.0.1

package/src/model.ts

@@ -3,27 +3,23 @@ import { autorun } from 'mobx'
 import { Instance, cast, types, addDisposer, SnapshotIn } from 'mobx-state-tree'
 import { hierarchy, cluster, HierarchyNode } from 'd3-hierarchy'
 import { ascending } from 'd3-array'
+import Stockholm from 'stockholm-js'
+// jbrowse
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst'
 import { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 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'
-
-export interface RowDetails {
-  [key: string]: unknown
-  name: string
-  range?: { start: number; end: number }
-}
 
 // locals
 import {
+  clamp,
   collapse,
+  filterHiddenLeafNodes,
   generateNodeIds,
   maxLength,
   setBrLength,
   skipBlanks,
-  clamp,
   NodeWithIds,
   NodeWithIdsAndLength,
 } from './util'
@@ -38,12 +34,23 @@ import { UniprotTrack } from './UniprotTrack'
 import { StructureModel } from './StructureModel'
 import { DialogQueueSessionMixin } from './DialogQueue'
 
+export interface RowDetails {
+  [key: string]: unknown
+  name: string
+  range?: { start: number; end: number }
+}
+
 interface BasicTrackModel {
   id: string
   name: string
   associatedRowName?: string
   height: number
 }
+interface Structure {
+  pdb: string
+  startPos: number
+  endPos: number
+}
 
 export interface TextTrackModel extends BasicTrackModel {
   customColorScheme?: Record<string, string>
@@ -73,6 +80,9 @@ type StructureSnap = SnapshotIn<typeof StructureModel>
 
 /**
  * #stateModel MsaView
+ * extends
+ * - BaseViewModel
+ * - DialogQueueSessionMixin
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
@@ -89,136 +99,174 @@ const model = types
     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<Record<string, string[]>>(),
-        }),
-      ),
+      turnedOffTracks: types.map(types.boolean),
+
       /**
        * #property
+       * data from the loaded tree/msa/treeMetadata, generally loaded by
+       * autorun
        */
       data: types.optional(
         types
@@ -243,20 +291,47 @@ const model = types
     }),
   )
   .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 as number | undefined,
+
+    /**
+     * #volatile
+     * the currently mouse-hovered column
+     */
+    mouseCol: undefined as number | 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 as unknown,
+
     /**
      * #volatile
      */
@@ -264,6 +339,7 @@ const model = types
       left: 20,
       top: 20,
     },
+
     /**
      * #volatile
      */
@@ -272,18 +348,23 @@ const model = types
   .actions(self => ({
     /**
      * #action
+     * set the height of the view in px
      */
     setHeight(height: number) {
       self.height = height
     },
+
     /**
      * #action
+     * add to the selected structures
      */
     addStructureToSelection(elt: StructureSnap) {
       self.selectedStructures.push(elt)
     },
+
     /**
      * #action
+     * remove from the selected structures
      */
     removeStructureFromSelection(elt: StructureSnap) {
       const r = self.selectedStructures.find(node => node.id === elt.id)
@@ -291,8 +372,10 @@ const model = types
         self.selectedStructures.remove(r)
       }
     },
+
     /**
      * #action
+     * toggle a structure from the selected structures list
      */
     toggleStructureSelection(elt: {
       id: string
@@ -305,51 +388,67 @@ const model = types
         self.selectedStructures.push(elt)
       }
     },
+
     /**
      * #action
+     * clear all selected structures
      */
     clearSelectedStructures() {
       self.selectedStructures = cast([])
     },
+
     /**
      * #action
+     * set error state
      */
     setError(error?: unknown) {
       self.error = error
     },
+
     /**
      * #action
+     * set mouse position (row, column) in the MSA
      */
     setMousePos(col?: number, row?: number) {
       self.mouseCol = col
       self.mouseRow = row
     },
+
     /**
      * #action
+     * set row height (px)
      */
     setRowHeight(n: number) {
       self.rowHeight = n
     },
+
     /**
      * #action
+     * set col width (px)
      */
     setColWidth(n: number) {
       self.colWidth = n
     },
+
     /**
      * #action
+     * set color scheme name
      */
     setColorSchemeName(name: string) {
       self.colorSchemeName = name
     },
+
     /**
      * #action
+     * synchronize the treewidth and treeareawidth
      */
     setTreeWidthMatchesArea(arg: boolean) {
       self.treeWidthMatchesArea = arg
     },
+
     /**
      * #action
+     * set scroll Y-offset (px)
      */
     setScrollY(n: number) {
       self.scrollY = n
@@ -357,22 +456,27 @@ const model = types
 
     /**
      * #action
+     * set tree area width (px)
      */
     setTreeAreaWidth(n: number) {
       self.treeAreaWidth = n
     },
     /**
      * #action
+     * set tree width (px)
      */
     setTreeWidth(n: number) {
       self.treeWidth = n
     },
+
     /**
      * #action
+     *
      */
     setCurrentAlignment(n: number) {
       self.currentAlignment = n
     },
+
     /**
      * #action
      */
@@ -385,6 +489,21 @@ const model = types
     setDrawTree(arg: boolean) {
       self.drawTree = arg
     },
+
+    /**
+     * #action
+     */
+    hideNode(arg: string) {
+      self.hidden.push(arg)
+    },
+
+    /**
+     * #action
+     */
+    clearHidden() {
+      self.hidden.clear()
+    },
+
     /**
      * #action
      */
@@ -395,42 +514,49 @@ const model = types
         self.collapsed.push(node)
       }
     },
+
     /**
      * #action
      */
     setShowOnly(node?: string) {
       self.showOnly = node
     },
+
     /**
      * #action
      */
     setShowBranchLen(arg: boolean) {
       self.showBranchLen = arg
     },
+
     /**
      * #action
      */
     setBgColor(arg: boolean) {
       self.bgColor = arg
     },
+
     /**
      * #action
      */
     setDrawNodeBubbles(arg: boolean) {
       self.drawNodeBubbles = arg
     },
+
     /**
      * #action
      */
     setData(data: { msa?: string; tree?: string }) {
       self.data = cast(data)
     },
+
     /**
      * #action
      */
     async setMSAFilehandle(msaFilehandle?: FileLocationType) {
       self.msaFilehandle = msaFilehandle
     },
+
     /**
      * #action
      */
@@ -442,18 +568,21 @@ const model = types
         self.treeFilehandle = treeFilehandle
       }
     },
+
     /**
      * #action
      */
     setMSA(result: string) {
       self.data.setMSA(result)
     },
+
     /**
      * #action
      */
     setTree(result: string) {
       self.data.setTree(result)
     },
+
     /**
      * #action
      */
@@ -533,12 +662,14 @@ const model = types
     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
      */
@@ -552,6 +683,7 @@ const model = types
     get header() {
       return this.MSA?.getHeader() || {}
     },
+
     /**
      * #method
      */
@@ -559,7 +691,12 @@ const model = types
       const matches = name.match(/\S+\/(\d+)-(\d+)/)
       return {
         data: this.MSA?.getRowData(name) || ({} as Record<string, unknown>),
-        ...(matches && { range: { start: +matches[1], end: +matches[2] } }),
+        ...(matches && {
+          range: {
+            start: +matches[1],
+            end: +matches[2],
+          },
+        }),
       }
     },
     /**
@@ -578,7 +715,7 @@ const model = types
      * #getter
      */
     get noTree() {
-      return !!this.tree.noTree
+      return !!this._tree.noTree
     },
     /**
      * #getter
@@ -617,7 +754,7 @@ const model = types
     /**
      * #getter
      */
-    get tree(): NodeWithIds {
+    get _tree(): NodeWithIds {
       return self.data.tree
         ? generateNodeIds(parseNewick(self.data.tree))
         : this.MSA?.getTree() || {
@@ -635,7 +772,8 @@ const model = types
     },
     /**
      * #getter
-     */ get mouseOverRowName() {
+     */
+    get mouseOverRowName() {
       return self.mouseRow !== undefined
         ? this.rowNames[self.mouseRow]
         : undefined
@@ -652,9 +790,10 @@ 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) {
         const res = hier.find(node => node.data.id === self.showOnly)
         if (res) {
@@ -665,22 +804,21 @@ const model = types
       if (self.collapsed.length) {
         self.collapsed
           .map(collapsedId => hier.find(node => node.data.id === collapsedId))
-          .filter((f): f is HierarchyNode<NodeWithIds> => !!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
     },
     /**
      * #getter
      */
-    get structures(): Record<
-      string,
-      {
-        pdb: string
-        startPos: number
-        endPos: number
-      }[]
-    > {
+    get structures(): Record<string, Structure[]> {
       return this.MSA?.getStructures() || {}
     },
     /**
@@ -695,6 +833,7 @@ const model = types
     },
     /**
      * #getter
+     * widget width minus the tree area gives the space for the MSA
      */
     get msaAreaWidth() {
       return self.width - self.treeAreaWidth
@@ -706,8 +845,8 @@ const model = types
       const blanks = []
       const strs = this.hierarchy
         .leaves()
-        .map(({ data }) => this.MSA?.getRow(data.name))
-        .filter((item): item is string[] => !!item)
+        .map(leaf => this.MSA?.getRow(leaf.data.name))
+        .filter((item): item is string => !!item)
 
       for (let i = 0; i < strs[0]?.length; i++) {
         let counter = 0
@@ -726,10 +865,11 @@ const model = types
      * #getter
      */
     get rows() {
+      const MSA = this.MSA
       return this.hierarchy
         .leaves()
-        .map(({ data }) => [data.name, this.MSA?.getRow(data.name)] as const)
-        .filter((f): f is [string, string[]] => !!f[1])
+        .map(leaf => [leaf.data.name, MSA?.getRow(leaf.data.name)] as const)
+        .filter((f): f is [string, string] => !!f[1])
     },
     /**
      * #getter
@@ -774,18 +914,15 @@ const model = types
      * generates a new tree that is clustered with x,y positions
      */
     get hierarchy(): HierarchyNode<NodeWithIdsAndLength> {
-      const root = this.root
+      const r = this.root
       const clust = cluster<NodeWithIds>()
         .size([this.totalHeight, self.treeWidth])
         .separation(() => 1)
-      clust(root)
-      setBrLength(
-        root,
-        (root.data.length = 0),
-        self.treeWidth / maxLength(root),
-      )
-      return root as HierarchyNode<NodeWithIdsAndLength>
+      clust(r)
+      setBrLength(r, (r.data.length = 0), self.treeWidth / maxLength(r))
+      return r as HierarchyNode<NodeWithIdsAndLength>
     },
+
     /**
      * #getter
      */
@@ -810,12 +947,14 @@ const model = types
         })
       }
     },
+
     /**
      * #action
      */
     doScrollY(deltaY: number) {
       self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0)
     },
+
     /**
      * #action
      */
@@ -826,6 +965,7 @@ const model = types
         0,
       )
     },
+
     /**
      * #action
      */
@@ -836,6 +976,7 @@ const model = types
         0,
       )
     },
+
     /**
      * #action
      */
@@ -876,27 +1017,32 @@ const model = types
       const { rowHeight, hierarchy, treeMetadata, fontSize } = self
       if (rowHeight > 5) {
         for (const node of hierarchy.leaves()) {
-          const {
-            data: { name },
-          } = node
-          const displayName = treeMetadata[name]?.genome || name
-          x = Math.max(measureText(displayName, fontSize), x)
+          x = Math.max(
+            measureText(
+              treeMetadata[node.data.name]?.genome || node.data.name,
+              fontSize,
+            ),
+            x,
+          )
         }
       }
       return x
     },
+
     /**
      * #getter
      */
     get secondaryStructureConsensus() {
       return self.MSA?.secondaryStructureConsensus
     },
+
     /**
      * #getter
      */
     get seqConsensus() {
       return self.MSA?.seqConsensus
     },
+
     /**
      * #getter
      */
@@ -911,69 +1057,40 @@ const model = types
       }
       return ['a']
     },
+
     /**
      * #getter
      */
-    get tracks(): BasicTrack[] {
-      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,
-              } as TextTrackModel,
-              ReactComponent: TextTrack,
-            }
-          })
-        : ([] as BasicTrack[])
+    get adapterTrackModels(): BasicTrack[] {
+      return (
+        self.MSA?.tracks.map(t => ({
+          model: {
+            ...t,
+            data: t.data ? skipBlanks(self.blanks, t.data) : undefined,
+            height: self.rowHeight,
+          } as TextTrackModel,
+          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))
+    /**
+     * #getter
+     */
+    get boxTrackModels(): BasicTrack[] {
+      return self.boxTracks
+        .filter(track => self.rows.some(row => row[0] === track.name))
         .map(track => ({
           model: track as BoxTrackModel,
           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'),
-                } as BoxTrackModel,
-                ReactComponent: BoxTrack,
-              },
-            ]
-          : ([] as BasicTrack[])
-
-      return [...adapterTracks, ...boxTracks, ...annotationTracks]
+    /**
+     * #getter
+     */
+    get tracks(): BasicTrack[] {
+      return [...this.adapterTrackModels, ...this.boxTrackModels]
     },
     /**
      * #getter
@@ -981,6 +1098,7 @@ const model = types
     get turnedOnTracks() {
       return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id))
     },
+
     /**
      * #method
      * returns coordinate in the current relative coordinate scheme
@@ -988,6 +1106,7 @@ const model = types
     pxToBp(coord: number) {
       return Math.floor((coord - self.scrollX) / self.colWidth)
     },
+
     /**
      * #method
      */
@@ -1022,6 +1141,7 @@ const model = types
 
       return i - count
     },
+
     /**
      * #method
      */
@@ -1037,6 +1157,7 @@ const model = types
 
       return position - count
     },
+
     /**
      * #method
      */
@@ -1058,6 +1179,29 @@ const model = types
       }
       return 0
     },
+
+    /**
+     * #method
+     */
+    relativePxToBp2(rowName: string, position: number) {
+      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
      */
@@ -1072,50 +1216,26 @@ const model = types
       return j
     },
   }))
-  .actions(self => ({
-    /**
-     * #action
-     */
-    addAnnotation(
-      start: number,
-      end: number,
-      attributes: Record<string, string[]>,
-    ) {
-      self.annotatedRegions.push({
-        start: self.getPos(start),
-        end: self.getPos(end),
-        attributes,
-      })
-    },
-    /**
-     * #action
-     */
-    setAnnotationClickBoundaries(left: number, right: number) {
-      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 () => {
@@ -1130,6 +1250,7 @@ const model = types
           }
         }),
       )
+      // autorun opens treeMetadataFilehandle
       addDisposer(
         self,
         autorun(async () => {
@@ -1146,6 +1267,8 @@ const model = types
           }
         }),
       )
+
+      // autorun opens msaFilehandle
       addDisposer(
         self,
         autorun(async () => {
@@ -1160,6 +1283,8 @@ const model = types
           }
         }),
       )
+
+      // autorun synchronizes treeWidth with treeAreaWidth
       addDisposer(
         self,
         autorun(async () => {