react-msaview 3.1.5 → 3.1.7

package/src/model.ts

@@ -1,10 +1,12 @@
 import React from 'react'
 import { autorun } from 'mobx'
-import { Instance, cast, types, addDisposer, SnapshotIn } from 'mobx-state-tree'
+import { Instance, cast, types, addDisposer } from 'mobx-state-tree'
 import { hierarchy, cluster, HierarchyNode } from 'd3-hierarchy'
 import { ascending } from 'd3-array'
 import Stockholm from 'stockholm-js'
 import { saveAs } from 'file-saver'
+import { Theme } from '@mui/material'
+
 // jbrowse
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst'
 import { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
@@ -16,7 +18,6 @@ import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewMo
 import {
   clamp,
   collapse,
-  filterHiddenLeafNodes,
   generateNodeIds,
   maxLength,
   setBrLength,
@@ -24,20 +25,26 @@ import {
   NodeWithIds,
   NodeWithIdsAndLength,
 } from './util'
+
+import { blocksX, blocksY } from './calculateBlocks'
+import { measureTextCanvas } from './measureTextCanvas'
+
+// components
 import TextTrack from './components/TextTrack'
 import BoxTrack from './components/BoxTrack'
+
+// parsers
 import ClustalMSA from './parsers/ClustalMSA'
 import StockholmMSA from './parsers/StockholmMSA'
 import FastaMSA from './parsers/FastaMSA'
 import parseNewick from './parseNewick'
 import colorSchemes from './colorSchemes'
+
+// models
 import { UniprotTrack } from './UniprotTrack'
-import { StructureModel } from './StructureModel'
+import { DataModelF } from './DataModel'
 import { DialogQueueSessionMixin } from './DialogQueue'
-import { renderToSvg } from './renderToSvg'
-import { Theme } from '@mui/material'
-import { blocksX, blocksY } from './calculateBlocks'
-import measureTextCanvas from './measureTextCanvas'
+import { SelectedStructuresMixin } from './SelectedStructuresMixin'
 
 export interface RowDetails {
   [key: string]: unknown
@@ -82,16 +89,30 @@ export interface IBoxTrack {
 
 export type BasicTrack = IBoxTrack | ITextTrack
 
-export type StructureSnap = SnapshotIn<typeof StructureModel>
-
 /**
  * #stateModel MsaView
  * extends
  * - BaseViewModel
  * - DialogQueueSessionMixin
+ * - SelectedStructuresMixin
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
+function reparseTree(tree: NodeWithIds): NodeWithIds {
+  return {
+    ...tree,
+    branchset: tree.branchset.map(r =>
+      r.branchset.length
+        ? reparseTree(r)
+        : {
+            branchset: [r],
+            id: `${r.id}-leafnode`,
+            name: `${r.name}-hidden`,
+          },
+    ),
+  }
+}
+
 export type DialogComponentType =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | React.LazyExoticComponent<React.FC<any>>
@@ -102,6 +123,7 @@ const model = types
   .compose(
     BaseViewModel,
     DialogQueueSessionMixin(),
+    SelectedStructuresMixin(),
     types.model('MsaView', {
       /**
        * #property
@@ -157,12 +179,6 @@ const model = types
        */
       scrollX: 0,
 
-      /**
-       * #property
-       * currently "selected" structures, generally PDB 3-D protein structures
-       */
-      selectedStructures: types.array(StructureModel),
-
       /**
        * #property
        * right-align the labels
@@ -244,12 +260,7 @@ const model = types
        */
       collapsed: types.array(types.string),
 
-      /**
-       * #property
-       * array of leaf nodes that are 'hidden', similar to collapsed but for leaf nodes
-       */
-      hidden: types.array(types.string),
-
+      collapsed2: types.array(types.string),
       /**
        * #property
        * focus on particular subtree
@@ -274,26 +285,7 @@ const model = types
        * data from the loaded tree/msa/treeMetadata, generally loaded by
        * autorun
        */
-      data: types.optional(
-        types
-          .model({
-            tree: types.maybe(types.string),
-            msa: types.maybe(types.string),
-            treeMetadata: types.maybe(types.string),
-          })
-          .actions(self => ({
-            setTree(tree?: string) {
-              self.tree = tree
-            },
-            setMSA(msa?: string) {
-              self.msa = msa
-            },
-            setTreeMetadata(treeMetadata?: string) {
-              self.treeMetadata = treeMetadata
-            },
-          })),
-        { tree: '', msa: '' },
-      ),
+      data: types.optional(DataModelF(), { tree: '', msa: '' }),
     }),
   )
   .volatile(() => ({
@@ -321,6 +313,18 @@ const model = types
      */
     mouseCol: undefined as number | undefined,
 
+    /**
+     * #volatile
+     * the currently mouse-click row
+     */
+    mouseClickRow: undefined as number | undefined,
+
+    /**
+     * #volatile
+     * the currently mouse-click column
+     */
+    mouseClickCol: undefined as number | undefined,
+
     /**
      * #volatile
      * a dummy variable that is incremented when ref changes so autorun for
@@ -357,49 +361,6 @@ const model = types
       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)
-      if (r) {
-        self.selectedStructures.remove(r)
-      }
-    },
-
-    /**
-     * #action
-     * toggle a structure from the selected structures list
-     */
-    toggleStructureSelection(elt: {
-      id: string
-      structure: { startPos: number; endPos: number; pdb: string }
-    }) {
-      const r = self.selectedStructures.find(node => node.id === elt.id)
-      if (r) {
-        self.selectedStructures.remove(r)
-      } else {
-        self.selectedStructures.push(elt)
-      }
-    },
-
-    /**
-     * #action
-     * clear all selected structures
-     */
-    clearSelectedStructures() {
-      self.selectedStructures = cast([])
-    },
-
     /**
      * #action
      * set error state
@@ -417,6 +378,15 @@ const model = types
       self.mouseRow = row
     },
 
+    /**
+     * #action
+     * set mouse click position (row, column) in the MSA
+     */
+    setMouseClickPos(col?: number, row?: number) {
+      self.mouseClickCol = col
+      self.mouseClickRow = row
+    },
+
     /**
      * #action
      * set row height (px)
@@ -493,20 +463,6 @@ const model = types
       self.drawTree = arg
     },
 
-    /**
-     * #action
-     */
-    hideNode(arg: string) {
-      self.hidden.push(arg)
-    },
-
-    /**
-     * #action
-     */
-    clearHidden() {
-      self.hidden.clear()
-    },
-
     /**
      * #action
      */
@@ -518,6 +474,16 @@ const model = types
       }
     },
 
+    /**
+     * #action
+     */
+    toggleCollapsed2(node: string) {
+      if (self.collapsed2.includes(node)) {
+        self.collapsed2.remove(node)
+      } else {
+        self.collapsed2.push(node)
+      }
+    },
     /**
      * #action
      */
@@ -680,7 +646,7 @@ const model = types
      * #getter
      */
     get _tree(): NodeWithIds {
-      return self.data.tree
+      const ret = self.data.tree
         ? generateNodeIds(parseNewick(self.data.tree))
         : this.MSA?.getTree() || {
             noTree: true,
@@ -688,6 +654,7 @@ const model = types
             id: 'empty',
             name: 'empty',
           }
+      return reparseTree(ret)
     },
     /**
      * #getter
@@ -726,18 +693,13 @@ const model = types
         }
       }
 
-      if (self.collapsed.length) {
-        self.collapsed
+      if (self.collapsed.length || self.collapsed2.length) {
+        ;[...self.collapsed, ...self.collapsed2]
           .map(collapsedId => hier.find(node => node.data.id === collapsedId))
           .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
     },
     /**
@@ -1160,7 +1122,7 @@ const model = types
     relativePxToBp(rowName: string, position: number) {
       const { rowNames, rows } = self
       const index = rowNames.indexOf(rowName)
-      if (index !== -1) {
+      if (index !== -1 && rows[index]) {
         const row = rows[index][1]
 
         let k = 0
@@ -1182,7 +1144,7 @@ const model = types
     relativePxToBp2(rowName: string, position: number) {
       const { rowNames, rows } = self
       const index = rowNames.indexOf(rowName)
-      if (index !== -1) {
+      if (index !== -1 && rows[index]) {
         const row = rows[index][1]
 
         let k = 0
@@ -1231,6 +1193,7 @@ const model = types
       includeMinimap?: boolean
       exportType: string
     }) {
+      const { renderToSvg } = await import('./renderToSvg')
       const html = await renderToSvg(self as MsaViewModel, opts)
       const blob = new Blob([html], { type: 'image/svg+xml' })
       saveAs(blob, 'image.svg')

package/src/util.ts

@@ -145,17 +145,6 @@ export function collapse(d: HierarchyNode<NodeWithIds>) {
   }
 }
 
-// Collapse the node and all it's children, from
-// https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd
-export function filterHiddenLeafNodes(
-  d: HierarchyNode<NodeWithIds> | null,
-  hiddenId?: string,
-) {
-  if (d?.children) {
-    d.children = d.children.filter(f => f.id !== hiddenId)
-  }
-}
-
 export function clamp(min: number, num: number, max: number) {
   return Math.min(Math.max(num, min), max)
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '3.1.5'
+export const version = '3.1.7'