react-msaview 4.1.1 → 4.3.0

package/src/components/header/ZoomStar.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+
+import RestartAlt from '@mui/icons-material/RestartAlt'
+import { IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import type { MsaViewModel } from '../../model'
+
+const useStyles = makeStyles()(theme => ({
+  dpad: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+  },
+  icon: {
+    padding: theme.spacing(0.5),
+  },
+}))
+
+const ZoomStar = observer(function ({ model }: { model: MsaViewModel }) {
+  const { classes } = useStyles()
+  return (
+    <div className={classes.dpad}>
+      <div />
+      <IconButton
+        className={classes.icon}
+        onClick={() => {
+          model.zoomInVertical()
+        }}
+      >
+        Y+
+      </IconButton>
+      <div />
+
+      <IconButton
+        className={classes.icon}
+        onClick={() => {
+          model.zoomOutHorizontal()
+        }}
+      >
+        X-
+      </IconButton>
+      <IconButton
+        className={classes.icon}
+        onClick={() => {
+          model.resetZoom()
+        }}
+      >
+        <RestartAlt />
+      </IconButton>
+      <IconButton
+        className={classes.icon}
+        onClick={() => {
+          model.zoomInHorizontal()
+        }}
+      >
+        X+
+      </IconButton>
+
+      <div />
+      <IconButton
+        className={classes.icon}
+        onClick={() => {
+          model.zoomOutVertical()
+        }}
+      >
+        Y-
+      </IconButton>
+      <div />
+    </div>
+  )
+})
+
+export default ZoomStar

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,5 +1,5 @@
 import type { MsaViewModel } from '../../model'
-import type { NodeWithIdsAndLength } from '../../util'
+import type { NodeWithIdsAndLength } from '../../types'
 import type { HierarchyNode } from 'd3-hierarchy'
 
 export function renderBoxFeatureCanvasBlock({

package/src/components/msa/renderMSABlock.ts

@@ -1,7 +1,7 @@
 import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
 
 import type { MsaViewModel } from '../../model'
-import type { NodeWithIdsAndLength } from '../../util'
+import type { NodeWithIdsAndLength } from '../../types'
 import type { Theme } from '@mui/material'
 import type { HierarchyNode } from 'd3-hierarchy'
 

package/src/components/tree/renderTreeCanvas.ts

@@ -31,9 +31,15 @@ export function renderTree({
   theme: Theme
   blockSizeYOverride?: number
 }) {
-  const { hierarchy, showBranchLen, blockSize } = model
+  const {
+    hierarchy,
+    allBranchesLength0,
+    showBranchLen: showBranchLenPre,
+    blockSize,
+  } = model
   const by = blockSizeYOverride || blockSize
   ctx.strokeStyle = theme.palette.text.primary
+  const showBranchLen = allBranchesLength0 ? false : showBranchLenPre
   for (const link of hierarchy.links()) {
     const { source, target } = link
     if (target.height === 0 && !showBranchLen) {
@@ -77,12 +83,14 @@ export function renderNodeBubbles({
 }) {
   const {
     hierarchy,
-    showBranchLen,
+    showBranchLen: showBranchLenPre,
+    allBranchesLength0,
     collapsed,
     blockSize,
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride || blockSize
+  const showBranchLen = allBranchesLength0 ? false : showBranchLenPre
   for (const node of hierarchy.descendants()) {
     const val = showBranchLen ? 'len' : 'y'
     // @ts-expect-error
@@ -131,7 +139,8 @@ export function renderTreeLabels({
 }) {
   const {
     fontSize,
-    showBranchLen,
+    showBranchLen: showBranchLenPre,
+    allBranchesLength0,
     treeMetadata,
     hierarchy,
     collapsed,
@@ -153,6 +162,7 @@ export function renderTreeLabels({
   } else {
     ctx.textAlign = 'start'
   }
+  const showBranchLen = allBranchesLength0 ? false : showBranchLenPre
   for (const node of leaves) {
     const {
       data: { name, id },

package/src/flatToTree.ts

@@ -0,0 +1,57 @@
+// Define the input item interface
+interface FlatItem {
+  id: number
+  parent?: number
+}
+
+// Define the tree node interface
+interface TreeNode {
+  id: string
+  name: string
+  parent?: string
+  children: TreeNode[]
+}
+
+/**
+ * Parses a flat list of items into a tree structure
+ * @param items - Array of flat items with id and optional parent
+ * @returns Array of root tree nodes
+ */
+export function flatToTree(items: FlatItem[]): TreeNode {
+  // Create a map to store all nodes by their id for quick lookup
+  const nodeMap = new Map<number, TreeNode>()
+
+  // First pass: Create all tree nodes
+  items.forEach(item => {
+    nodeMap.set(item.id, {
+      ...item,
+      id: `${item.id}`,
+      name: `${item.id}`,
+      parent: item.parent !== undefined ? `${item.parent}` : undefined,
+      children: [],
+    })
+  })
+
+  // Second pass: Build parent-child relationships
+  const roots: TreeNode[] = []
+
+  items.forEach(item => {
+    const node = nodeMap.get(item.id)!
+
+    if (item.parent !== undefined) {
+      // This item has a parent, add it to parent's children
+      const parentNode = nodeMap.get(item.parent)
+      if (parentNode) {
+        parentNode.children.push(node)
+      } else {
+        // Parent doesn't exist, treat as root
+        roots.push(node)
+      }
+    } else {
+      // This item has no parent, it's a root node
+      roots.push(node)
+    }
+  })
+
+  return roots[0]!
+}

package/src/model.ts

@@ -1,11 +1,10 @@
-import React from 'react'
-
 import { groupBy, notEmpty, sum } from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
 import { colord } from 'colord'
 import { ascending } from 'd3-array'
 import { cluster, hierarchy } from 'd3-hierarchy'
+import { parseEmfTree } from 'emf-js'
 import { saveAs } from 'file-saver'
 import { autorun, transaction } from 'mobx'
 import { addDisposer, cast, types } from 'mobx-state-tree'
@@ -15,16 +14,17 @@ import Stockholm from 'stockholm-js'
 import { blocksX, blocksY } from './calculateBlocks'
 import colorSchemes from './colorSchemes'
 import TextTrack from './components/TextTrack'
+import { flatToTree } from './flatToTree'
 import palettes from './ggplotPalettes'
 import { measureTextCanvas } from './measureTextCanvas'
 import { DataModelF } from './model/DataModel'
 import { DialogQueueSessionMixin } from './model/DialogQueue'
 import { MSAModelF } from './model/msaModel'
 import { TreeModelF } from './model/treeModel'
+import { parseAsn1 } from './parseAsn1'
 import parseNewick from './parseNewick'
 import ClustalMSA from './parsers/ClustalMSA'
 import EmfMSA from './parsers/EmfMSA'
-import EmfTree from './parsers/EmfTree'
 import FastaMSA from './parsers/FastaMSA'
 import StockholmMSA from './parsers/StockholmMSA'
 import { reparseTree } from './reparseTree'
@@ -36,46 +36,31 @@ import {
   clamp,
   collapse,
   generateNodeIds,
+  isGzip,
   len,
+  localStorageGetBoolean,
+  localStorageSetBoolean,
   maxLength,
   setBrLength,
   skipBlanks,
 } from './util'
 
 import type { InterProScanResults } from './launchInterProScan'
-import type { NodeWithIds, NodeWithIdsAndLength } from './util'
+import type {
+  Accession,
+  BasicTrack,
+  NodeWithIds,
+  NodeWithIdsAndLength,
+  TextTrackModel,
+} from './types'
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import type { Theme } from '@mui/material'
 import type { HierarchyNode } from 'd3-hierarchy'
 import type { Instance } from 'mobx-state-tree'
 
-export interface Accession {
-  accession: string
-  name: string
-  description: string
-}
-export interface BasicTrackModel {
-  id: string
-  name: string
-  associatedRowName?: string
-  height: number
-}
-
-export interface TextTrackModel extends BasicTrackModel {
-  customColorScheme?: Record<string, string>
-  data: string
-}
-
-export interface ITextTrack {
-  ReactComponent: React.FC<any>
-  model: TextTrackModel
-}
-
-export type BasicTrack = ITextTrack
-
-export function isGzip(buf: Uint8Array) {
-  return buf[0] === 31 && buf[1] === 139 && buf[2] === 8
-}
+const defaultRowHeight = 16
+const defaultColWidth = 12
+const showZoomStarKey = 'msa-showZoomStar'
 
 /**
  * #stateModel MsaView
@@ -101,6 +86,10 @@ function stateModelFactory() {
          * #property
          */
         showDomains: false,
+        /**
+         * #property
+         */
+        hideGaps: true,
         /**
          * #property
          */
@@ -125,15 +114,6 @@ function stateModelFactory() {
          * #property
          */
         drawMsaLetters: true,
-        /**
-         * #property
-         */
-        hideGaps: false,
-
-        /**
-         * #property
-         */
-        drawTreeText: true,
 
         /**
          * #property
@@ -145,7 +125,7 @@ function stateModelFactory() {
          * #property
          * height of each row, px
          */
-        rowHeight: 18,
+        rowHeight: defaultRowHeight,
 
         /**
          * #property
@@ -163,7 +143,7 @@ function stateModelFactory() {
          * #property
          * width of columns, px
          */
-        colWidth: 14,
+        colWidth: defaultColWidth,
 
         /**
          * #property
@@ -250,6 +230,12 @@ function stateModelFactory() {
        * screens
        */
       highResScaleFactor: 2,
+
+      /**
+       * #volatile
+       * obtained from localStorage
+       */
+      showZoomStar: localStorageGetBoolean(showZoomStarKey, false),
       /**
        * #volatile
        */
@@ -363,6 +349,12 @@ function stateModelFactory() {
       setLoadingMSA(arg: boolean) {
         self.loadingMSA = arg
       },
+      /**
+       * #volatile
+       */
+      setShowZoomStar(arg: boolean) {
+        self.showZoomStar = arg
+      },
       /**
        * #action
        */
@@ -635,26 +627,26 @@ function stateModelFactory() {
        */
       get tree(): NodeWithIds {
         const text = self.data.tree
-        let ret: NodeWithIds
-        if (text) {
-          let t: string
-          if (text.startsWith('SEQ')) {
-            const r = new EmfTree(text)
-            t = r.data.tree
-          } else {
-            t = text
-          }
-          ret = generateNodeIds(parseNewick(t))
-        } else {
-          ret = this.MSA?.getTree() || {
-            noTree: true,
-            children: [],
-            id: 'empty',
-            name: 'empty',
-          }
-        }
-        return reparseTree(ret)
+        return text
+          ? reparseTree(
+              generateNodeIds(
+                text.startsWith('BioTreeContainer')
+                  ? flatToTree(parseAsn1(text))
+                  : parseNewick(
+                      text.startsWith('SEQ') ? parseEmfTree(text).tree : text,
+                    ),
+              ),
+            )
+          : reparseTree(
+              this.MSA?.getTree() || {
+                noTree: true,
+                children: [],
+                id: 'empty',
+                name: 'empty',
+              },
+            )
       },
+
       /**
        * #getter
        */
@@ -846,6 +838,13 @@ function stateModelFactory() {
       get leaves() {
         return this.hierarchy.leaves()
       },
+
+      /**
+       * #getter
+       */
+      get allBranchesLength0() {
+        return this.hierarchy.links().every(s => !s.source.data.length)
+      },
     }))
     .views(self => ({
       /**
@@ -937,6 +936,13 @@ function stateModelFactory() {
         self.drawMsaLetters = arg
       },
 
+      /**
+       * #action
+       */
+      resetZoom() {
+        self.setColWidth(defaultColWidth)
+        self.setRowHeight(defaultRowHeight)
+      },
       /**
        * #action
        */
@@ -1379,6 +1385,14 @@ function stateModelFactory() {
           }),
         )
 
+        // autorun saves local settings
+        addDisposer(
+          self,
+          autorun(() => {
+            localStorageSetBoolean(showZoomStarKey, self.showZoomStar)
+          }),
+        )
+
         // autorun opens treeFilehandle
         addDisposer(
           self,

package/src/parseAsn1.test.ts

@@ -0,0 +1,11 @@
+import fs from 'fs'
+
+import { expect, test } from 'vitest'
+
+import { parseAsn1 } from './parseAsn1'
+
+const r = fs.readFileSync(require.resolve('../test/data/tree.asn'), 'utf8')
+
+test('real data file', () => {
+  expect(parseAsn1(r)).toMatchSnapshot()
+})