react-msaview 4.1.1 → 4.2.0

package/src/components/TextTrack.tsx

@@ -5,7 +5,8 @@ import { observer } from 'mobx-react'
 
 import { colorContrast } from '../util'
 
-import type { ITextTrack, MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model'
+import type { ITextTrack } from '../types'
 
 const AnnotationBlock = observer(function ({
   track,

package/src/components/Track.tsx

@@ -6,8 +6,6 @@ import { observer } from 'mobx-react'
 import normalizeWheel from 'normalize-wheel'
 import { makeStyles } from 'tss-react/mui'
 
-// icons
-
 import type { MsaViewModel } from '../model'
 
 // lazies

package/src/components/header/Header.tsx

@@ -10,6 +10,8 @@ import HeaderMenuExtra from './HeaderMenuExtra'
 import HeaderStatusArea from './HeaderStatusArea'
 import MultiAlignmentSelector from './MultiAlignmentSelector'
 import ZoomControls from './ZoomControls'
+import ZoomMenu from './ZoomMenu'
+import ZoomStar from './ZoomStar'
 
 import type { MsaViewModel } from '../../model'
 
@@ -24,7 +26,11 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
     <div ref={ref} style={{ display: 'flex' }}>
       <HeaderMenuExtra model={model} />
       <ZoomControls model={model} />
-      <MultiAlignmentSelector model={model} />
+      {model.showZoomStar ? <ZoomStar model={model} /> : null}
+      <ZoomMenu model={model} />
+      <div style={{ margin: 'auto' }}>
+        <MultiAlignmentSelector model={model} />
+      </div>
       <HeaderInfoArea model={model} />
       <Spacer />
       <HeaderStatusArea model={model} />

package/src/components/header/HeaderMenuExtra.tsx

@@ -77,7 +77,10 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
               onClick: () => {
                 model.queueDialog(handleClose => [
                   UserProvidedDomainsDialog,
-                  { handleClose, model },
+                  {
+                    handleClose,
+                    model,
+                  },
                 ])
               },
             },
@@ -118,7 +121,10 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
               onClick: () => {
                 model.queueDialog(onClose => [
                   FeatureFilterDialog,
-                  { onClose, model },
+                  {
+                    onClose,
+                    model,
+                  },
                 ])
               },
             },

package/src/components/header/ZoomControls.tsx

@@ -1,16 +1,11 @@
 import React from 'react'
 
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import MoreVert from '@mui/icons-material/MoreVert'
-import RestartAlt from '@mui/icons-material/RestartAlt'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { MsaViewModel } from '../../model'
-
-// icons
+import type { MsaViewModel } from '../../model'
 
 const ZoomControls = observer(function ZoomControls({
   model,
@@ -33,52 +28,6 @@ const ZoomControls = observer(function ZoomControls({
       >
         <ZoomOut />
       </IconButton>
-      <CascadingMenuButton
-        menuItems={[
-          {
-            label: 'Zoom in horizontal',
-            onClick: () => {
-              model.zoomInHorizontal()
-            },
-          },
-          {
-            label: 'Zoom in vertical',
-            onClick: () => {
-              model.zoomInVertical()
-            },
-          },
-          {
-            label: 'Zoom out horizontal',
-            onClick: () => {
-              model.zoomOutHorizontal()
-            },
-          },
-
-          {
-            label: 'Zoom out vertical',
-            onClick: () => {
-              model.zoomOutVertical()
-            },
-          },
-
-          {
-            label: 'Show entire view',
-            onClick: () => {
-              model.showEntire()
-            },
-          },
-          {
-            label: 'Reset zoom to default',
-            icon: RestartAlt,
-            onClick: () => {
-              model.setColWidth(16)
-              model.setRowHeight(20)
-            },
-          },
-        ]}
-      >
-        <MoreVert />
-      </CascadingMenuButton>
     </>
   )
 })

package/src/components/header/ZoomMenu.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import MoreVert from '@mui/icons-material/MoreVert'
+import RestartAlt from '@mui/icons-material/RestartAlt'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model'
+
+const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
+  return (
+    <CascadingMenuButton
+      menuItems={[
+        {
+          label: 'Fit to view',
+          onClick: () => {
+            model.showEntire()
+          },
+        },
+        {
+          label: 'Reset zoom to default',
+          icon: RestartAlt,
+          onClick: () => {
+            model.resetZoom()
+          },
+        },
+        {
+          label: 'Show extra zoom options',
+          checked: model.showZoomStar,
+          type: 'checkbox',
+          onClick: () => {
+            model.setShowZoomStar(!model.showZoomStar)
+          },
+        },
+      ]}
+    >
+      <MoreVert />
+    </CascadingMenuButton>
+  )
+})
+
+export default ZoomMenu

package/src/components/header/ZoomStar.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import { RestartAlt } from '@mui/icons-material'
+
+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
@@ -145,7 +130,7 @@ function stateModelFactory() {
          * #property
          * height of each row, px
          */
-        rowHeight: 18,
+        rowHeight: defaultRowHeight,
 
         /**
          * #property
@@ -163,7 +148,7 @@ function stateModelFactory() {
          * #property
          * width of columns, px
          */
-        colWidth: 14,
+        colWidth: defaultColWidth,
 
         /**
          * #property
@@ -250,6 +235,12 @@ function stateModelFactory() {
        * screens
        */
       highResScaleFactor: 2,
+
+      /**
+       * #volatile
+       * obtained from localStorage
+       */
+      showZoomStar: localStorageGetBoolean(showZoomStarKey, true),
       /**
        * #volatile
        */
@@ -363,6 +354,12 @@ function stateModelFactory() {
       setLoadingMSA(arg: boolean) {
         self.loadingMSA = arg
       },
+      /**
+       * #volatile
+       */
+      setShowZoomStar(arg: boolean) {
+        self.showZoomStar = arg
+      },
       /**
        * #action
        */
@@ -635,26 +632,28 @@ 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))
+          return reparseTree(
+            generateNodeIds(
+              text.startsWith('BioTreeContainer')
+                ? flatToTree(parseAsn1(text))
+                : parseNewick(
+                    text.startsWith('SEQ') ? parseEmfTree(text).tree : text,
+                  ),
+            ),
+          )
         } else {
-          ret = this.MSA?.getTree() || {
-            noTree: true,
-            children: [],
-            id: 'empty',
-            name: 'empty',
-          }
+          return reparseTree(
+            this.MSA?.getTree() || {
+              noTree: true,
+              children: [],
+              id: 'empty',
+              name: 'empty',
+            },
+          )
         }
-        return reparseTree(ret)
       },
+
       /**
        * #getter
        */
@@ -846,6 +845,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 +943,13 @@ function stateModelFactory() {
         self.drawMsaLetters = arg
       },
 
+      /**
+       * #action
+       */
+      resetZoom() {
+        self.setColWidth(defaultColWidth)
+        self.setRowHeight(defaultRowHeight)
+      },
       /**
        * #action
        */
@@ -1379,6 +1392,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()
+})