react-msaview 8.2.0 → 8.3.0

package/src/renderToSvg.tsx

@@ -14,6 +14,7 @@ import { visibleColRange } from './components/msa/visibleColRange.ts'
 import { headerRunsAcross } from './components/rowpanels/headerLayout.ts'
 import { renderRowPanels } from './components/rowpanels/renderRowPanel.ts'
 import { renderAllTracks } from './components/tracks/drawTracks.ts'
+import ScaleBarSVG from './components/tree/ScaleBarSVG.tsx'
 import {
   bracketGap,
   cladeHeight,
@@ -323,17 +324,13 @@ function TreeScaleBarSVG({
   if (!bar) {
     return null
   }
-  const y = treeOverviewHeight + treeScaleBarHeight
-  const color = theme.palette.text.primary
   return (
     <g id="tree-scalebar">
-      <text x={marginLeft} y={y - 9} fontSize={10} fill={color}>
-        {bar.label}
-      </text>
-      <path
-        d={`M${marginLeft} ${y - 7} v6 h${bar.px} v-6`}
-        fill="none"
-        stroke={color}
+      <ScaleBarSVG
+        bar={bar}
+        marginLeft={marginLeft}
+        y={treeOverviewHeight + treeScaleBarHeight}
+        color={theme.palette.text.primary}
       />
     </g>
   )

package/src/rerootTree.ts

@@ -0,0 +1,172 @@
+/**
+ * Rerooting over the plain node `parseNewick` produces, the shape
+ * `@gmod/newick` and jbrowse-components' tree sidebar share, so these can move
+ * into that package unchanged.
+ *
+ * Every traversal is iterative, for the reason the ones in `@gmod/newick` are: a
+ * caterpillar tree is as deep as it has leaves, and recursion overflows the
+ * stack past about 5000 of them.
+ */
+export interface TreeNode {
+  name?: string
+  length?: number
+  children?: TreeNode[]
+}
+
+function preorder<N extends TreeNode>(root: N) {
+  const order: N[] = []
+  const parents = new Map<N, N>()
+  const stack = [root]
+  while (stack.length > 0) {
+    const node = stack.pop()!
+    order.push(node)
+    for (const child of (node.children ?? []) as N[]) {
+      parents.set(child, node)
+      stack.push(child)
+    }
+  }
+  return { order, parents }
+}
+
+function hasLengths(order: TreeNode[]) {
+  return order.some(n => n.length !== undefined)
+}
+
+// the root's two children make one branch of the unrooted tree, which is the
+// branch a rerooting at either of them splits
+function mergedSibling<N extends TreeNode>(root: N, target: N) {
+  return root.children?.length === 2
+    ? (root.children.find(c => c !== target) as N | undefined)
+    : undefined
+}
+
+/**
+ * The tree rooted on the branch above `target`, `offset` up from it, or at the
+ * middle of that branch without one. Where the root has two children, their
+ * branches are one branch of the unrooted tree, and `offset` runs across both.
+ *
+ * The nodes between `target` and the old root turn over. A name on one of them
+ * labels the branch above it, which is where a support value sits, so the name
+ * follows that branch to the node now at its lower end. A two-child root has
+ * nothing left to split once one child leaves, so it drops out and its
+ * branches join.
+ */
+export function rerootTree<N extends TreeNode>(
+  root: N,
+  target: N,
+  offset?: number,
+): TreeNode {
+  const { order, parents } = preorder(root)
+  if (!parents.has(target)) {
+    return root
+  }
+  const lengths = hasLengths(order)
+  const sibling =
+    parents.get(target) === root ? mergedSibling(root, target) : undefined
+  const branch = (target.length ?? 0) + (sibling?.length ?? 0)
+  const at = Math.min(Math.max(offset ?? branch / 2, 0), branch)
+  const length = (n: number) => (lengths ? n : undefined)
+
+  const path = [target]
+  for (let n = parents.get(target); n; n = parents.get(n)) {
+    path.push(n)
+  }
+  // Built from the old root down, so the node each turned node now hangs
+  // `above` it already exists. undefined where the old root dropped out.
+  let above: TreeNode | undefined
+  for (let i = path.length - 1; i >= 1; i--) {
+    const node = path[i]!
+    const below = path[i - 1]!
+    const children = node.children!.filter(c => c !== below)
+    if (above) {
+      children.push(above)
+    }
+    if (children.length === 0) {
+      above = undefined
+    } else if (i === path.length - 1 && children.length === 1) {
+      const only = children[0]!
+      above = {
+        ...only,
+        length: length(
+          (only.length ?? 0) + (below.length ?? 0) - (i === 1 ? at : 0),
+        ),
+      }
+    } else {
+      above = {
+        ...node,
+        name: i === 1 ? undefined : below.name,
+        children,
+        length: length((below.length ?? 0) - (i === 1 ? at : 0)),
+      }
+    }
+  }
+  return {
+    children: [{ ...target, length: length(at) }, ...(above ? [above] : [])],
+  }
+}
+
+/**
+ * The tree rooted halfway along the longest path between two tips, which is
+ * where a clock would put the root: the usual choice for the unrooted tree
+ * FastTree, IQ-TREE or neighbor joining writes. A tree with no branch lengths
+ * counts branches.
+ */
+export function midpointRoot<N extends TreeNode>(root: N): TreeNode {
+  const { order, parents } = preorder(root)
+  const tips = order.filter(n => !n.children?.length)
+  if (tips.length < 2) {
+    return root
+  }
+  const lengths = hasLengths(order)
+  const weight = (n: N) => (lengths ? (n.length ?? 0) : 1)
+
+  // distance from `from` to every node over the unrooted tree, and the
+  // neighbor each was reached through
+  function reach(from: N) {
+    const dist = new Map<N, number>([[from, 0]])
+    const via = new Map<N, N>()
+    const stack = [from]
+    while (stack.length > 0) {
+      const node = stack.pop()!
+      const d = dist.get(node)!
+      const parent = parents.get(node)
+      if (parent && !dist.has(parent)) {
+        dist.set(parent, d + weight(node))
+        via.set(parent, node)
+        stack.push(parent)
+      }
+      for (const child of (node.children ?? []) as N[]) {
+        if (!dist.has(child)) {
+          dist.set(child, d + weight(child))
+          via.set(child, node)
+          stack.push(child)
+        }
+      }
+    }
+    return { dist, via }
+  }
+  function farthest(dist: Map<N, number>) {
+    return tips.reduce((best, tip) =>
+      dist.get(tip)! > dist.get(best)! ? tip : best,
+    )
+  }
+
+  const a = farthest(reach(tips[0]!).dist)
+  const { dist, via } = reach(a)
+  const b = farthest(dist)
+  if (b === a) {
+    return root
+  }
+  const half = dist.get(b)! / 2
+  let node = b
+  let next = via.get(node)!
+  while (dist.get(next)! > half) {
+    node = next
+    next = via.get(node)!
+  }
+  // the midpoint lies on the branch between `node` and `next`, and whichever
+  // of them is the child carries that branch
+  return parents.get(node) === next
+    ? rerootTree(root, node, dist.get(node)! - half)
+    : rerootTree(root, next, half - dist.get(next)!)
+}

package/src/types.ts

@@ -327,10 +327,36 @@ export interface Highlight {
 /**
  * What the viewer draws over a clade. `highlight` fills the rows behind it,
  * across the tree and the alignment. `bracket` draws a bar and the clade's
- * `label` in the gutter right of the tip labels. `collapse` and `focus` seed
- * the collapsed list and the subtree in focus at load.
+ * `label` in the gutter right of the tip labels. `collapse`, `focus` and
+ * `rotate` seed the collapsed list, the subtree in focus and the rotated nodes
+ * at load.
  */
-export type CladeMark = 'highlight' | 'bracket' | 'collapse' | 'focus'
+export type CladeMark =
+  | 'highlight'
+  | 'bracket'
+  | 'collapse'
+  | 'focus'
+  | 'rotate'
+
+/**
+ * The order each node's children draw in, top to bottom. `branchLength` puts
+ * the shortest branch first, `input` keeps the file's order, `ladderize` puts
+ * the clade with the fewest tips first, so the deep clades step down toward
+ * the bottom, and `ladderizeReverse` puts the one with the most tips first.
+ */
+export type TreeOrder =
+  | 'branchLength'
+  | 'input'
+  | 'ladderize'
+  | 'ladderizeReverse'
+
+/**
+ * Where the tree is rooted: `midpoint` halfway along the longest path between
+ * two tips, and `{outgroup}` on the branch above those tips' most recent common
+ * ancestor, or above the rest of the tips' where the outgroup straddles the
+ * root the file gives.
+ */
+export type TreeRoot = 'midpoint' | { outgroup: string[] }
 
 /**
  * A clade of the tree and the mark drawn over it. `mrca` names tips whose most
@@ -378,8 +404,9 @@ export interface Region {
 /**
  * A cell of the alignment in the host's coordinates, 1-based like Highlight:
  * `column` counts every column of the file, hidden gappy ones included, and
- * `residue` counts the row's own letters, absent on a gap. A pointer over a
- * track has a column and no row.
+ * `residue` counts the row's own letters, absent on a gap. `letter` is the
+ * character in the cell, the gap character (`-` or `.`) on a gap. A pointer
+ * over a track has a column and no row.
  */
 export interface Cell {
   column: number
@@ -444,10 +471,5 @@ export interface NodeWithIds {
   noTree?: boolean
 }
 
-export interface NodeWithIdsAndLength {
-  id: string
-  name: string
-  children: NodeWithIdsAndLength[]
-  noTree?: boolean
-  length: number
-}
+/** @deprecated the same type as `NodeWithIds` */
+export type NodeWithIdsAndLength = NodeWithIds

package/src/useMsaSvgFigure.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 
 import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
 import { getSnapshot } from '@jbrowse/mobx-state-tree'
-import { compareStructural, reaction } from 'mobx'
+import { compareShallow, reaction } from 'mobx'
 
 import { renderToSvg } from './renderToSvg.tsx'
 
@@ -18,7 +18,8 @@ export interface MsaSvgFigure {
 /**
  * The viewer's SVG export of its viewport, as markup for the page to insert.
  * It redraws after the view settles: `delay` ms after the last scroll, zoom,
- * resize or change to the snapshot. A draw a later one overtakes is dropped.
+ * resize, highlight or change to the snapshot. A draw a later one overtakes is
+ * dropped.
  *
  * The figure's row names and letters are SVG text, so the browser's find
  * locates them, a reader can select them, and print stylesheets apply.
@@ -37,7 +38,13 @@ export function useMsaSvgFigure(
     const dispose = reaction(
       () =>
         model.viewInitialized && model.dataInitialized
-          ? [getSnapshot(model), model.width, model.height]
+          ? [
+              getSnapshot(model),
+              model.width,
+              model.height,
+              model.resolvedHighlights,
+              model.highlightedColumnRuns,
+            ]
           : undefined,
       key => {
         if (!key) {
@@ -61,7 +68,7 @@ export function useMsaSvgFigure(
           },
         )
       },
-      { delay, fireImmediately: true, equals: compareStructural },
+      { delay, fireImmediately: true, equals: compareShallow },
     )
     return () => {
       latest = -1

package/src/version.ts

@@ -1 +1 @@
-export const version = '8.2.0'
+export const version = '8.3.0'

package/src/writeNewick.ts

@@ -0,0 +1,38 @@
+import { descendants } from './hierarchy.ts'
+
+import type { HierarchyNode } from './hierarchy.ts'
+
+// a name holding any of these reads back as grammar unless it is quoted
+const needsQuotes = /[\s(),:;[\]']/
+
+function quote(name: string) {
+  return needsQuotes.test(name) ? `'${name.replaceAll("'", "''")}'` : name
+}
+
+/**
+ * The tree as Newick, in the order it is drawn. An internal node whose name is
+ * only its generated id goes unnamed. Each subtree's string is dropped once its
+ * parent takes it in, since a caterpillar tree is as deep as it has tips and
+ * keeping every one is quadratic.
+ */
+export function writeNewick(root: HierarchyNode) {
+  const written = new Map<HierarchyNode, string>()
+  for (const node of descendants(root).reverse()) {
+    const { id, name, length } = node.data
+    let text = ''
+    if (node.children) {
+      text = `(${node.children.map(c => written.get(c)!).join(',')})`
+      for (const child of node.children) {
+        written.delete(child)
+      }
+    }
+    if (!(node.children && name === id)) {
+      text += quote(name)
+    }
+    if (length !== undefined) {
+      text += `:${length}`
+    }
+    written.set(node, text)
+  }
+  return `${written.get(root)!};`
+}

package/dist/components/PortalTooltip.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-/**
- * A tooltip beside the pointer, portaled to the body. A panel's scroll
- * transform is a containing block, so a fixed tooltip left inside it would
- * position against the scrolled content instead of the window.
- */
-export default function PortalTooltip({ clientX, clientY, children, }: {
-    clientX: number;
-    clientY: number;
-    children: React.ReactNode;
-}): React.ReactPortal;

package/dist/components/PortalTooltip.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { createPortal } from 'react-dom';
-const useStyles = makeStyles()(theme => ({
-    tooltip: {
-        position: 'fixed',
-        pointerEvents: 'none',
-        zIndex: 10000,
-        backgroundColor: theme.palette.grey[700],
-        color: theme.palette.common.white,
-        padding: '4px 8px',
-        borderRadius: 4,
-        fontSize: 12,
-        whiteSpace: 'nowrap',
-        maxWidth: 300,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-}));
-/**
- * A tooltip beside the pointer, portaled to the body. A panel's scroll
- * transform is a containing block, so a fixed tooltip left inside it would
- * position against the scrolled content instead of the window.
- */
-export default function PortalTooltip({ clientX, clientY, children, }) {
-    const { classes } = useStyles();
-    return createPortal(React.createElement("div", { className: classes.tooltip, style: { left: clientX + 12, top: clientY + 12 } }, children), document.body);
-}
-//# sourceMappingURL=PortalTooltip.js.map

package/dist/components/PortalTooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PortalTooltip.js","sourceRoot":"","sources":["../../src/components/PortalTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,EAAE;QACP,QAAQ,EAAE,OAAO;QACjB,aAAa,EAAE,MAAM;QACrB,MAAM,EAAE,KAAK;QACb,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QACxC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;QACjC,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KACzB;CACF,CAAC,CAAC,CAAA;AAEH;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,OAAO,EACP,OAAO,EACP,QAAQ,GAKT;IACC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,OAAO,YAAY,CACjB,6BACE,SAAS,EAAE,OAAO,CAAC,OAAO,EAC1B,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,IAE/C,QAAQ,CACL,EACN,QAAQ,CAAC,IAAI,CACd,CAAA;AACH,CAAC"}

package/dist/components/header/HeaderStatusArea.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { LoadingEllipses } from '@jbrowse/core/ui';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Button, Typography } from '@mui/material';
-import { observer } from 'mobx-react';
-const useStyles = makeStyles()({
-    margin: {
-        margin: 'auto',
-        marginLeft: 10,
-    },
-});
-const HeaderStatusArea = observer(({ model }) => {
-    const { status } = model;
-    const { classes } = useStyles();
-    return status ? (React.createElement(Typography, { className: classes.margin },
-        React.createElement(LoadingEllipses, { message: status.msg, component: "span" }),
-        ' ',
-        status.onCancel ? (React.createElement(Button, { size: "small", onClick: () => status.onCancel?.() }, "Cancel")) : null)) : null;
-});
-export default HeaderStatusArea;
-//# sourceMappingURL=HeaderStatusArea.js.map

package/dist/components/header/HeaderStatusArea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderStatusArea.js","sourceRoot":"","sources":["../../../src/components/header/HeaderStatusArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,EAAE;KACf;CACF,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IACvE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IACxB,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,oBAAC,UAAU,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM;QACnC,oBAAC,eAAe,IAAC,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,SAAS,EAAC,MAAM,GAAG;QAAC,GAAG;QAC5D,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjB,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,aAE9C,CACV,CAAC,CAAC,CAAC,IAAI,CACG,CACd,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/components/tree/TreeBranchMenu.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Menu, MenuItem } from '@mui/material';
-import { observer } from 'mobx-react';
-const TreeBranchMenu = observer(function ({ node, model, onClose, }) {
-    return (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-            left: node.x,
-            top: node.y,
-        }, transitionDuration: 0, open: true, onClose: onClose },
-        React.createElement(MenuItem, { dense: true, disabled: true }, node.name),
-        React.createElement(MenuItem, { dense: true, onClick: () => {
-                model.toggleCollapsed(node.id);
-                onClose();
-            } }, model.collapsed.includes(node.id)
-            ? 'Expand this node'
-            : 'Collapse this node'),
-        React.createElement(MenuItem, { dense: true, onClick: () => {
-                if (model.showOnly === node.id) {
-                    model.setShowOnly(undefined);
-                }
-                else {
-                    model.setShowOnly(node.id);
-                }
-                onClose();
-            } }, model.showOnly === node.id
-            ? 'Disable show only this node'
-            : 'Show only this node')));
-});
-export default TreeBranchMenu;
-//# sourceMappingURL=TreeBranchMenu.js.map

package/dist/components/tree/TreeBranchMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TreeBranchMenu.js","sourceRoot":"","sources":["../../../src/components/tree/TreeBranchMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAWrC,MAAM,cAAc,GAAG,QAAQ,CAAC,UAAU,EACxC,IAAI,EACJ,KAAK,EACL,OAAO,GAKR;IACC,OAAO,CACL,oBAAC,IAAI,IACH,eAAe,EAAC,gBAAgB,EAChC,cAAc,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,CAAC;YACZ,GAAG,EAAE,IAAI,CAAC,CAAC;SACZ,EACD,kBAAkB,EAAE,CAAC,EACrB,IAAI,QACJ,OAAO,EAAE,OAAO;QAEhB,oBAAC,QAAQ,IAAC,KAAK,QAAC,QAAQ,UACrB,IAAI,CAAC,IAAI,CACD;QACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;gBAC9B,OAAO,EAAE,CAAA;YACX,CAAC,IAEA,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,CAAC,CAAC,kBAAkB;YACpB,CAAC,CAAC,oBAAoB,CACf;QACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;oBAC/B,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;gBAC9B,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;gBAC5B,CAAC;gBACD,OAAO,EAAE,CAAA;YACX,CAAC,IAEA,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE;YACzB,CAAC,CAAC,6BAA6B;YAC/B,CAAC,CAAC,qBAAqB,CAChB,CACN,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/components/tree/TreeNodeMenu.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { MsaViewModel } from '../../model.ts';
-declare const TreeMenu: ({ node, onClose, model, }: {
-    node: {
-        x: number;
-        y: number;
-        name: string;
-        id: string;
-    };
-    model: MsaViewModel;
-    onClose: () => void;
-}) => React.JSX.Element;
-export default TreeMenu;

package/dist/components/tree/TreeNodeMenu.js

@@ -1,41 +0,0 @@
-import React, { lazy } from 'react';
-import { Menu, MenuItem } from '@mui/material';
-import { observer } from 'mobx-react';
-// lazies
-const TreeNodeInfoDialog = lazy(() => import('./dialogs/TreeNodeInfoDialog.js'));
-const TreeMenu = observer(function ({ node, onClose, model, }) {
-    const { collapsed } = model;
-    const { name, id } = node;
-    const isCollapsed = collapsed.includes(id);
-    return (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-            top: node.y,
-            left: node.x,
-        }, transitionDuration: 0, open: true, onClose: onClose },
-        React.createElement(MenuItem, { dense: true, disabled: true }, name),
-        React.createElement(MenuItem, { dense: true, onClick: () => {
-                model.queueDialog(onClose => [
-                    TreeNodeInfoDialog,
-                    {
-                        info: model.getRowData(name),
-                        model,
-                        nodeName: name,
-                        onClose,
-                    },
-                ]);
-                onClose();
-            } }, "More info..."),
-        React.createElement(MenuItem, { dense: true, onClick: () => {
-                model.toggleCollapsed(id);
-                onClose();
-            } }, isCollapsed ? 'Expand subtree' : 'Collapse subtree'),
-        React.createElement(MenuItem, { dense: true, onClick: () => {
-                model.drawRelativeTo(node.name);
-                onClose();
-            } }, "Indicate differences from this row"),
-        model.relativeTo ? (React.createElement(MenuItem, { dense: true, onClick: () => {
-                model.drawRelativeTo(undefined);
-                onClose();
-            } }, "Clear reference row")) : null));
-});
-export default TreeMenu;
-//# sourceMappingURL=TreeNodeMenu.js.map

package/dist/components/tree/TreeNodeMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TreeNodeMenu.js","sourceRoot":"","sources":["../../../src/components/tree/TreeNodeMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,SAAS;AACT,MAAM,kBAAkB,GAAG,IAAI,CAC7B,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAkC,CAAC,CACjD,CAAA;AAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAClC,IAAI,EACJ,OAAO,EACP,KAAK,GAUN;IACC,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC3B,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,IAAI,CAAA;IACzB,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IAC1C,OAAO,CACL,oBAAC,IAAI,IACH,eAAe,EAAC,gBAAgB,EAChC,cAAc,EAAE;YACd,GAAG,EAAE,IAAI,CAAC,CAAC;YACX,IAAI,EAAE,IAAI,CAAC,CAAC;SACb,EACD,kBAAkB,EAAE,CAAC,EACrB,IAAI,QACJ,OAAO,EAAE,OAAO;QAEhB,oBAAC,QAAQ,IAAC,KAAK,QAAC,QAAQ,UACrB,IAAI,CACI;QAEX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;oBAC3B,kBAAkB;oBAClB;wBACE,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;wBAC5B,KAAK;wBACL,QAAQ,EAAE,IAAI;wBACd,OAAO;qBACR;iBACF,CAAC,CAAA;gBACF,OAAO,EAAE,CAAA;YACX,CAAC,mBAGQ;QACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,CAAA;gBACzB,OAAO,EAAE,CAAA;YACX,CAAC,IAEA,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAC3C;QACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC/B,OAAO,EAAE,CAAA;YACX,CAAC,yCAGQ;QACV,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAClB,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;gBAC/B,OAAO,EAAE,CAAA;YACX,CAAC,0BAGQ,CACZ,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/src/components/PortalTooltip.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import { makeStyles } from '@jbrowse/core/util/tss-react'
-import { createPortal } from 'react-dom'
-
-const useStyles = makeStyles()(theme => ({
-  tooltip: {
-    position: 'fixed',
-    pointerEvents: 'none',
-    zIndex: 10000,
-    backgroundColor: theme.palette.grey[700],
-    color: theme.palette.common.white,
-    padding: '4px 8px',
-    borderRadius: 4,
-    fontSize: 12,
-    whiteSpace: 'nowrap',
-    maxWidth: 300,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-}))
-
-/**
- * A tooltip beside the pointer, portaled to the body. A panel's scroll
- * transform is a containing block, so a fixed tooltip left inside it would
- * position against the scrolled content instead of the window.
- */
-export default function PortalTooltip({
-  clientX,
-  clientY,
-  children,
-}: {
-  clientX: number
-  clientY: number
-  children: React.ReactNode
-}) {
-  const { classes } = useStyles()
-  return createPortal(
-    <div
-      className={classes.tooltip}
-      style={{ left: clientX + 12, top: clientY + 12 }}
-    >
-      {children}
-    </div>,
-    document.body,
-  )
-}

package/src/components/header/HeaderStatusArea.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-
-import { LoadingEllipses } from '@jbrowse/core/ui'
-import { makeStyles } from '@jbrowse/core/util/tss-react'
-import { Button, Typography } from '@mui/material'
-import { observer } from 'mobx-react'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const useStyles = makeStyles()({
-  margin: {
-    margin: 'auto',
-    marginLeft: 10,
-  },
-})
-
-const HeaderStatusArea = observer(({ model }: { model: MsaViewModel }) => {
-  const { status } = model
-  const { classes } = useStyles()
-  return status ? (
-    <Typography className={classes.margin}>
-      <LoadingEllipses message={status.msg} component="span" />{' '}
-      {status.onCancel ? (
-        <Button size="small" onClick={() => status.onCancel?.()}>
-          Cancel
-        </Button>
-      ) : null}
-    </Typography>
-  ) : null
-})
-
-export default HeaderStatusArea

package/src/components/tree/TreeBranchMenu.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-
-import { Menu, MenuItem } from '@mui/material'
-import { observer } from 'mobx-react'
-
-import type { MsaViewModel } from '../../model.ts'
-
-interface Node {
-  x: number
-  y: number
-  name: string
-  id: string
-}
-
-const TreeBranchMenu = observer(function ({
-  node,
-  model,
-  onClose,
-}: {
-  node: Node
-  model: MsaViewModel
-  onClose: () => void
-}) {
-  return (
-    <Menu
-      anchorReference="anchorPosition"
-      anchorPosition={{
-        left: node.x,
-        top: node.y,
-      }}
-      transitionDuration={0}
-      open
-      onClose={onClose}
-    >
-      <MenuItem dense disabled>
-        {node.name}
-      </MenuItem>
-      <MenuItem
-        dense
-        onClick={() => {
-          model.toggleCollapsed(node.id)
-          onClose()
-        }}
-      >
-        {model.collapsed.includes(node.id)
-          ? 'Expand this node'
-          : 'Collapse this node'}
-      </MenuItem>
-      <MenuItem
-        dense
-        onClick={() => {
-          if (model.showOnly === node.id) {
-            model.setShowOnly(undefined)
-          } else {
-            model.setShowOnly(node.id)
-          }
-          onClose()
-        }}
-      >
-        {model.showOnly === node.id
-          ? 'Disable show only this node'
-          : 'Show only this node'}
-      </MenuItem>
-    </Menu>
-  )
-})
-
-export default TreeBranchMenu