react-msaview 2.1.5 → 3.0.1

package/src/model.ts

@@ -1,28 +1,25 @@
 import React from 'react'
+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 { autorun } from 'mobx'
+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'
@@ -35,6 +32,13 @@ import parseNewick from './parseNewick'
 import colorSchemes from './colorSchemes'
 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
@@ -42,6 +46,11 @@ interface BasicTrackModel {
   associatedRowName?: string
   height: number
 }
+interface Structure {
+  pdb: string
+  startPos: number
+  endPos: number
+}
 
 export interface TextTrackModel extends BasicTrackModel {
   customColorScheme?: Record<string, string>
@@ -71,141 +80,193 @@ type StructureSnap = SnapshotIn<typeof StructureModel>
 
 /**
  * #stateModel MsaView
+ * extends
+ * - BaseViewModel
+ * - DialogQueueSessionMixin
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
+export type DialogComponentType =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | React.LazyExoticComponent<React.FC<any>>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | React.FC<any>
+
 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<Record<string, string[]>>(),
-        }),
-      ),
+      turnedOffTracks: types.map(types.boolean),
+
       /**
        * #property
+       * data from the loaded tree/msa/treeMetadata, generally loaded by
+       * autorun
        */
       data: types.optional(
         types
@@ -230,43 +291,80 @@ const model = types
     }),
   )
   .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 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
+     */
     margin: {
       left: 20,
       top: 20,
     },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    DialogComponent: undefined as undefined | React.FC<any>,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    DialogProps: undefined as any,
 
-    // annotations
+    /**
+     * #volatile
+     */
     annotPos: undefined as { left: number; right: number } | undefined,
   }))
   .actions(self => ({
     /**
      * #action
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setDialogComponent(dlg?: React.FC<any>, props?: any) {
-      self.DialogComponent = dlg
-      self.DialogProps = props
-    },
-    /**
-     * #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)
@@ -274,8 +372,10 @@ const model = types
         self.selectedStructures.remove(r)
       }
     },
+
     /**
      * #action
+     * toggle a structure from the selected structures list
      */
     toggleStructureSelection(elt: {
       id: string
@@ -288,85 +388,122 @@ 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
      */
-    setScrollY(n: number) {
-      self.scrollY = n
+    setTreeWidthMatchesArea(arg: boolean) {
+      self.treeWidthMatchesArea = arg
     },
+
     /**
      * #action
+     * set scroll Y-offset (px)
      */
-    setScrollX(n: number) {
-      self.scrollX = n
+    setScrollY(n: number) {
+      self.scrollY = n
     },
+
     /**
      * #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
+     */
+    setLabelsAlignRight(arg: boolean) {
+      self.labelsAlignRight = arg
+    },
+    /**
+     * #action
+     */
+    setDrawTree(arg: boolean) {
+      self.drawTree = arg
+    },
+
     /**
      * #action
      */
-    toggleLabelsAlignRight() {
-      self.labelsAlignRight = !self.labelsAlignRight
+    hideNode(arg: string) {
+      self.hidden.push(arg)
     },
+
     /**
      * #action
      */
-    toggleDrawTree() {
-      self.drawTree = !self.drawTree
+    clearHidden() {
+      self.hidden.clear()
     },
+
     /**
      * #action
      */
@@ -377,42 +514,49 @@ const model = types
         self.collapsed.push(node)
       }
     },
+
     /**
      * #action
      */
     setShowOnly(node?: string) {
       self.showOnly = node
     },
+
     /**
      * #action
      */
-    toggleBranchLen() {
-      self.showBranchLen = !self.showBranchLen
+    setShowBranchLen(arg: boolean) {
+      self.showBranchLen = arg
     },
+
     /**
      * #action
      */
-    toggleBgColor() {
-      self.bgColor = !self.bgColor
+    setBgColor(arg: boolean) {
+      self.bgColor = arg
     },
+
     /**
      * #action
      */
-    toggleNodeBubbles() {
-      self.drawNodeBubbles = !self.drawNodeBubbles
+    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
      */
@@ -424,72 +568,29 @@ const model = types
         self.treeFilehandle = treeFilehandle
       }
     },
+
     /**
      * #action
      */
     setMSA(result: string) {
       self.data.setMSA(result)
     },
+
     /**
      * #action
      */
     setTree(result: string) {
       self.data.setTree(result)
     },
+
     /**
      * #action
      */
     setTreeMetadata(result: string) {
       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: number[] = []
     let oldBlocksY: number[] = []
@@ -561,24 +662,28 @@ 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
      */
     get colorScheme() {
       return colorSchemes[self.colorSchemeName]
     },
+
     /**
      * #getter
      */
     get header() {
       return this.MSA?.getHeader() || {}
     },
+
     /**
      * #method
      */
@@ -586,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],
+          },
+        }),
       }
     },
     /**
@@ -605,7 +715,7 @@ const model = types
      * #getter
      */
     get noTree() {
-      return !!this.tree.noTree
+      return !!this._tree.noTree
     },
     /**
      * #getter
@@ -639,12 +749,12 @@ const model = types
      * #getter
      */
     get numColumns() {
-      return ((this.MSA?.getWidth() || 0) - this.blanks.length) * self.colWidth
+      return (this.MSA?.getWidth() || 0) - this.blanks.length
     },
     /**
      * #getter
      */
-    get tree(): NodeWithIds {
+    get _tree(): NodeWithIds {
       return self.data.tree
         ? generateNodeIds(parseNewick(self.data.tree))
         : this.MSA?.getTree() || {
@@ -662,7 +772,8 @@ const model = types
     },
     /**
      * #getter
-     */ get mouseOverRowName() {
+     */
+    get mouseOverRowName() {
       return self.mouseRow !== undefined
         ? this.rowNames[self.mouseRow]
         : undefined
@@ -679,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) {
@@ -692,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() || {}
     },
     /**
@@ -722,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
@@ -733,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
@@ -753,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
@@ -772,6 +885,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
      */
@@ -795,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
      */
@@ -831,22 +947,36 @@ const model = types
         })
       }
     },
+
     /**
      * #action
      */
     doScrollY(deltaY: number) {
       self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0)
     },
+
     /**
      * #action
      */
     doScrollX(deltaX: number) {
       self.scrollX = clamp(
-        -self.numColumns + (self.msaAreaWidth - 100),
+        -(self.numColumns * self.colWidth) + (self.msaAreaWidth - 100),
         self.scrollX + deltaX,
         0,
       )
     },
+
+    /**
+     * #action
+     */
+    setScrollX(n: number) {
+      self.scrollX = clamp(
+        -(self.numColumns * self.colWidth) + (self.msaAreaWidth - 100),
+        n,
+        0,
+      )
+    },
+
     /**
      * #action
      */
@@ -879,18 +1009,40 @@ const model = types
     },
   }))
   .views(self => ({
+    /**
+     * #getter
+     */
+    get labelsWidth() {
+      let x = 0
+      const { rowHeight, hierarchy, treeMetadata, fontSize } = self
+      if (rowHeight > 5) {
+        for (const node of hierarchy.leaves()) {
+          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
      */
@@ -905,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
@@ -975,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
@@ -982,6 +1106,7 @@ const model = types
     pxToBp(coord: number) {
       return Math.floor((coord - self.scrollX) / self.colWidth)
     },
+
     /**
      * #method
      */
@@ -1016,6 +1141,7 @@ const model = types
 
       return i - count
     },
+
     /**
      * #method
      */
@@ -1031,6 +1157,7 @@ const model = types
 
       return position - count
     },
+
     /**
      * #method
      */
@@ -1052,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
      */
@@ -1066,32 +1216,85 @@ const model = types
       return j
     },
   }))
-  .actions(self => ({
+
+  .views(self => ({
     /**
-     * #action
+     * #getter
+     * total height of track area (px)
      */
-    addAnnotation(
-      start: number,
-      end: number,
-      attributes: Record<string, string[]>,
-    ) {
-      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: number, right: number) {
-      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 => {