react-msaview 8.2.0 → 8.4.0

package/src/components/tracks/drawTracks.ts

@@ -159,6 +159,20 @@ export function rulerStep(colWidth: number, minPixels = 55) {
   return step
 }
 
+// The 0-based columns in [xStart, end) to label: column 1, then each column
+// whose 1-based number is a multiple of the step. A step of 2 or more puts the
+// first multiple at least half a step's width past column 1, which clears the
+// two labels.
+export function rulerCols(xStart: number, end: number, colWidth: number) {
+  const step = rulerStep(colWidth)
+  const cols = step > 1 && xStart <= 0 && end > 0 ? [0] : []
+  const first = Math.max(1, Math.ceil((xStart + 1) / step)) * step
+  for (let n = first; n <= end; n += step) {
+    cols.push(n - 1)
+  }
+  return cols
+}
+
 const RULER_FONT_SIZE = 10
 const TICK_HEIGHT = 4
 
@@ -186,7 +200,6 @@ export function drawColumnRuler({
     blockWidth: blockSize,
     colWidth,
   })
-  const step = rulerStep(colWidth)
   const end = Math.min(xEnd, numColumns)
   setFontSize(ctx, RULER_FONT_SIZE)
   ctx.textAlign = 'center'
@@ -195,7 +208,7 @@ export function drawColumnRuler({
   ctx.strokeStyle = textColor
   ctx.lineWidth = 1
 
-  for (let col = Math.ceil(xStart / step) * step; col < end; col += step) {
+  for (const col of rulerCols(xStart, end, colWidth)) {
     const text = label(col)
     if (text === undefined) {
       continue

package/src/components/tracks/useTrackHover.ts

@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { dragSelection } from '../selectionDrag.ts'
+import { useHoverAnchor } from '../useHoverAnchor.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type React from 'react'
@@ -6,7 +7,8 @@ import type React from 'react'
 /**
  * Translates pointer events over a track's row into the hovered column and a
  * tooltip anchor. The track shares the alignment's columns, so hovering it sets
- * the model's mouse column too and the alignment's hover band follows along.
+ * the model's mouse column too and the alignment's hover band follows along. A
+ * drag along the row selects the columns it covers across every row.
  *
  * `tooltip` off skips the anchor, so a track whose tooltip is turned off still
  * drives the hover band without re-rendering on every mouse move.
@@ -18,25 +20,45 @@ export function useTrackHover({
   model: MsaViewModel
   tooltip: boolean
 }) {
-  const [hover, setHover] = useState<{ col: number; x: number; y: number }>()
+  const { anchor, hoverAt, clearAnchor } = useHoverAnchor<number>()
 
   // the blocks are laid out in column space and scrolled by a transform on
   // their container, so the pointer's column comes off the untransformed row
+  function colAt(clientX: number, left: number) {
+    return Math.floor((clientX - left - model.scrollX) / model.colWidth)
+  }
+
   function onMouseMove(event: React.MouseEvent, el: HTMLElement) {
-    const { colWidth, scrollX, numColumns } = model
-    const { left } = el.getBoundingClientRect()
-    const col = Math.floor((event.clientX - left - scrollX) / colWidth)
-    const hit = col >= 0 && col < numColumns
+    const col = colAt(event.clientX, el.getBoundingClientRect().left)
+    const hit = col >= 0 && col < model.numColumns
     model.setMousePos(hit ? col : undefined, undefined)
     if (tooltip) {
-      setHover(hit ? { col, x: event.clientX, y: event.clientY } : undefined)
+      hoverAt(event, hit ? col : undefined)
+    }
+  }
+
+  // a press on a track's canvas, which leaves out the resize divider under it.
+  // The row takes the focus, so Escape reaches onMsaKey from there too
+  function onMouseDown(event: React.MouseEvent, el: HTMLElement) {
+    if (event.button === 0 && event.target instanceof HTMLCanvasElement) {
+      event.preventDefault()
+      el.focus({ preventScroll: true })
+      const { left } = el.getBoundingClientRect()
+      dragSelection(model, event, ({ clientX }) => ({
+        col: colAt(clientX, left),
+      }))
     }
   }
 
   function onMouseLeave() {
-    setHover(undefined)
+    clearAnchor()
     model.setMousePos(undefined, undefined)
   }
 
-  return { hover: tooltip ? hover : undefined, onMouseMove, onMouseLeave }
+  return {
+    anchor: tooltip ? anchor : undefined,
+    onMouseMove,
+    onMouseDown,
+    onMouseLeave,
+  }
 }

package/src/components/tree/ScaleBarSVG.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+/**
+ * The branch-length scale bar: its label over a bracket `bar.px` wide, both
+ * resting on `y`.
+ */
+export default function ScaleBarSVG({
+  bar,
+  marginLeft,
+  y,
+  color,
+}: {
+  bar: { label: string; px: number }
+  marginLeft: number
+  y: number
+  color: string
+}) {
+  return (
+    <>
+      <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}
+      />
+    </>
+  )
+}

package/src/components/tree/TreeCanvas.tsx

@@ -5,15 +5,15 @@ import { observer } from 'mobx-react'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useWheelScroll } from '../../useWheelScroll.ts'
-import { referenceColor, treeHoverColor } from '../overlayColors.ts'
 import CladeLabels from './CladeLabels.tsx'
 import TreeCanvasBlock from './TreeCanvasBlock.tsx'
+import { renderTreeMouseover } from './renderTreeMouseover.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
-  const { height, blocksY, treeAreaWidth, scrollY } = model
+  const { height, blocksY, treeAreaWidth, scrollY, highResScaleFactor } = model
   const onScrollY = useCallback(
     (d: number) => {
       model.doScrollY(d)
@@ -22,47 +22,16 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
+  const canvasWidth = treeAreaWidth * highResScaleFactor
+  const canvasHeight = height * highResScaleFactor
   const mouseoverRef = useCanvasAutorun({
     draw: ctx => {
       if (isAlive(model)) {
-        const {
-          rowHeight,
-          treeAreaWidth: w,
-          height: h,
-          scrollY: sy,
-          mouseRow,
-          referenceRowIndex,
-          hoveredRowIndices,
-        } = model
-        ctx.resetTransform()
-        ctx.clearRect(0, 0, w, h)
-
-        // rows are laid out at a fixed pitch, so a row index is all that is
-        // needed to place its band (leaf.x is rowHeight*(index+0.5))
-        const fillRow = (index: number) => {
-          ctx.fillRect(0, index * rowHeight + sy, w, rowHeight)
-        }
-
-        if (referenceRowIndex !== undefined) {
-          ctx.fillStyle = referenceColor
-          fillRow(referenceRowIndex)
-        }
-
-        ctx.fillStyle = treeHoverColor
-        for (const index of hoveredRowIndices) {
-          fillRow(index)
-        }
-        if (
-          mouseRow !== undefined &&
-          mouseRow !== referenceRowIndex &&
-          !hoveredRowIndices.includes(mouseRow)
-        ) {
-          fillRow(mouseRow)
-        }
+        renderTreeMouseover({ ctx, model })
       }
     },
-    width: treeAreaWidth,
-    height,
+    width: canvasWidth,
+    height: canvasHeight,
     deps: [model],
   })
 
@@ -95,8 +64,8 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       </div>
       <canvas
         ref={mouseoverRef}
-        width={treeAreaWidth}
-        height={height}
+        width={canvasWidth}
+        height={canvasHeight}
         style={{
           position: 'absolute',
           top: 0,

package/src/components/tree/TreeCanvasBlock.tsx

@@ -1,17 +1,17 @@
 import React, { useState } from 'react'
 
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import PortalTooltip from '../PortalTooltip.tsx'
-import TreeBranchMenu from './TreeBranchMenu.tsx'
-import TreeNodeMenu from './TreeNodeMenu.tsx'
+import TreeMenu from './TreeMenu.tsx'
 import { renderTreeCanvas } from './renderTreeCanvas.ts'
 import { useTreeHover } from './useTreeHover.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { TreeMenuTarget } from './TreeMenu.tsx'
 
 const useStyles = makeStyles()(theme => ({
   hover: {
@@ -22,13 +22,6 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-interface MenuData {
-  name: string
-  id: string
-  x: number
-  y: number
-}
-
 const TreeCanvasBlock = observer(function ({
   model,
   offsetY,
@@ -38,10 +31,11 @@ const TreeCanvasBlock = observer(function ({
 }) {
   const { classes } = useStyles()
   const theme = useTheme()
-  const [branchMenu, setBranchMenu] = useState<MenuData>()
-  const [nodeMenu, setNodeMenu] = useState<MenuData>()
-  const { clickMap, hovered, hitTest, onMouseMove, onMouseLeave } =
-    useTreeHover({ model, offsetY })
+  const [menu, setMenu] = useState<TreeMenuTarget>()
+  const { clickMap, anchor, hitTest, onMouseMove, onMouseLeave } = useTreeHover(
+    { model, offsetY },
+  )
+  const hovered = anchor?.value
 
   const { treeAreaWidth, blockSize, highResScaleFactor } = model
   // TreePanel clips to treeAreaWidth, so a wider canvas is wasted backing store
@@ -77,22 +71,12 @@ const TreeCanvasBlock = observer(function ({
 
   return (
     <>
-      {branchMenu ? (
-        <TreeBranchMenu
-          node={branchMenu}
-          model={model}
-          onClose={() => {
-            setBranchMenu(undefined)
-          }}
-        />
-      ) : null}
-
-      {nodeMenu ? (
-        <TreeNodeMenu
-          node={nodeMenu}
+      {menu ? (
+        <TreeMenu
+          node={menu}
           model={model}
           onClose={() => {
-            setNodeMenu(undefined)
+            setMenu(undefined)
           }}
         />
       ) : null}
@@ -111,17 +95,13 @@ const TreeCanvasBlock = observer(function ({
         onClick={event => {
           const entry = hitTest(event)
           if (entry) {
-            const menu = {
+            setMenu({
               x: event.clientX,
               y: event.clientY,
               id: entry.id,
               name: entry.name,
-            }
-            if (entry.branch) {
-              setBranchMenu(menu)
-            } else {
-              setNodeMenu(menu)
-            }
+              leaf: !entry.branch,
+            })
           }
         }}
       />
@@ -139,10 +119,10 @@ const TreeCanvasBlock = observer(function ({
         />
       ) : null}
 
-      {hovered ? (
-        <PortalTooltip clientX={hovered.clientX} clientY={hovered.clientY}>
-          {hovered.name}
-        </PortalTooltip>
+      {anchor ? (
+        <BaseTooltip clientPoint={anchor.clientPoint}>
+          {anchor.value.name}
+        </BaseTooltip>
       ) : null}
     </>
   )

package/src/components/tree/TreeMenu.tsx

@@ -0,0 +1,129 @@
+import React, { lazy } from 'react'
+
+import { Menu, MenuItem } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const TreeNodeInfoDialog = lazy(
+  () => import('./dialogs/TreeNodeInfoDialog.tsx'),
+)
+
+export interface TreeMenuTarget {
+  x: number
+  y: number
+  name: string
+  id: string
+  leaf: boolean
+}
+
+const TreeMenu = observer(function ({
+  node,
+  model,
+  onClose,
+}: {
+  node: TreeMenuTarget
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  const { collapsed, showOnly, relativeTo } = model
+  const { name, id, leaf } = node
+  const isCollapsed = collapsed.includes(id)
+  const isRoot = id === model.tree.id
+  const noun = leaf ? 'subtree' : 'this node'
+  return (
+    <Menu
+      anchorReference="anchorPosition"
+      anchorPosition={{ left: node.x, top: node.y }}
+      transitionDuration={0}
+      open
+      onClose={onClose}
+    >
+      <MenuItem dense disabled>
+        {name}
+      </MenuItem>
+      {leaf ? (
+        <MenuItem
+          dense
+          onClick={() => {
+            model.queueDialog(onClose => [
+              TreeNodeInfoDialog,
+              { info: model.getRowData(name), model, nodeName: name, onClose },
+            ])
+            onClose()
+          }}
+        >
+          More info...
+        </MenuItem>
+      ) : null}
+      <MenuItem
+        dense
+        onClick={() => {
+          model.toggleCollapsed(id)
+          onClose()
+        }}
+      >
+        {isCollapsed ? `Expand ${noun}` : `Collapse ${noun}`}
+      </MenuItem>
+      {leaf ? null : (
+        <MenuItem
+          dense
+          onClick={() => {
+            model.setShowOnly(showOnly === id ? undefined : id)
+            onClose()
+          }}
+        >
+          {showOnly === id
+            ? 'Disable show only this node'
+            : 'Show only this node'}
+        </MenuItem>
+      )}
+      {leaf || isCollapsed ? null : (
+        <MenuItem
+          dense
+          onClick={() => {
+            model.toggleRotated(id)
+            onClose()
+          }}
+        >
+          Rotate this node
+        </MenuItem>
+      )}
+      {isRoot ? null : (
+        <MenuItem
+          dense
+          onClick={() => {
+            model.rerootAt(id)
+            onClose()
+          }}
+        >
+          Reroot here
+        </MenuItem>
+      )}
+      {leaf ? (
+        <MenuItem
+          dense
+          onClick={() => {
+            model.drawRelativeTo(name)
+            onClose()
+          }}
+        >
+          Indicate differences from this row
+        </MenuItem>
+      ) : null}
+      {leaf && relativeTo ? (
+        <MenuItem
+          dense
+          onClick={() => {
+            model.drawRelativeTo(undefined)
+            onClose()
+          }}
+        >
+          Clear reference row
+        </MenuItem>
+      ) : null}
+    </Menu>
+  )
+})
+
+export default TreeMenu

package/src/components/tree/TreeRuler.tsx

@@ -4,6 +4,7 @@ import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { treeScaleBarHeight as h } from '../../constants.ts'
+import ScaleBarSVG from './ScaleBarSVG.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -18,19 +19,12 @@ const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
   return (
     <div style={{ flexShrink: 0, width: treeAreaWidth }}>
       {bar ? (
-        <svg
-          width={treeAreaWidth}
-          height={h}
-          style={{ display: 'block' }}
-          color={theme.palette.text.primary}
-        >
-          <text x={marginLeft} y={h - 9} fontSize={10} fill="currentColor">
-            {bar.label}
-          </text>
-          <path
-            d={`M${marginLeft} ${h - 7} v6 h${bar.px} v-6`}
-            fill="none"
-            stroke="currentColor"
+        <svg width={treeAreaWidth} height={h} style={{ display: 'block' }}>
+          <ScaleBarSVG
+            bar={bar}
+            marginLeft={marginLeft}
+            y={h}
+            color={theme.palette.text.primary}
           />
         </svg>
       ) : null}

package/src/components/tree/dialogs/TreeNodeInfoDialog.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 
-import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes'
-import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard'
 import { Dialog } from '@jbrowse/core/ui'
-import { DialogContent } from '@mui/material'
+import { DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import MetadataTable from '../../MetadataTable.tsx'
 import SequenceTextArea from '../../SequenceTextArea.tsx'
 
 import type { MsaViewModel } from '../../../model.ts'
@@ -34,20 +33,19 @@ const TreeNodeInfoDialog = observer(function ({
       maxWidth="xl"
     >
       <DialogContent>
-        <BaseCard title="Attributes">
-          <Attributes attributes={{ nodeName, ...info }} />
-        </BaseCard>
-        <BaseCard title="Sequence">
-          {res ? (
-            <SequenceTextArea str={[res]} />
-          ) : (
-            <div>Sequence not found</div>
-          )}
-        </BaseCard>
+        <Typography variant="h6">Attributes</Typography>
+        <MetadataTable record={{ nodeName, ...info }} />
+        <Typography variant="h6">Sequence</Typography>
+        {res ? (
+          <SequenceTextArea str={[res]} />
+        ) : (
+          <Typography>Sequence not found</Typography>
+        )}
         {metadata ? (
-          <BaseCard title="Extra metadata">
-            <Attributes attributes={metadata} />
-          </BaseCard>
+          <>
+            <Typography variant="h6">Extra metadata</Typography>
+            <MetadataTable record={metadata} />
+          </>
         ) : null}
       </DialogContent>
     </Dialog>

package/src/components/tree/renderTreeCanvas.ts

@@ -6,6 +6,7 @@ import {
   highlightLabelHeight,
   highlightRowFill,
 } from '../msa/renderHighlights.ts'
+import { referenceColor } from '../overlayColors.ts'
 import { bracketBarWidth, bracketGap } from './cladeBrackets.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -64,6 +65,13 @@ function forEachNodeInBlock(
   }
 }
 
+// withId gives an unnamed node its path, node-0-1-1, as its name
+function cladeName(node: HierarchyNode, unnamed: string) {
+  const { id, name } = node.data
+  const label = name === id ? unnamed : name
+  return node.value === undefined ? label : `${label} (${node.value} tips)`
+}
+
 // Calculate node x-coordinate for both phylogram (with branch lengths) and
 // cladogram (topology only) modes. tipX is the pixel x the tips sit at.
 // For cladograms: x = (maxDepthToLeaf - nodeDepthToLeaf) / maxDepthToLeaf * tipX
@@ -182,7 +190,7 @@ function renderCollapsedTriangles({
   const by = blockSizeYOverride ?? blockSize
   const halfHeight = Math.max(2, rowHeight * 0.42)
   forEachNodeInBlock(hierarchy, offsetY, by, blockPad(model), node => {
-    const { id, name } = node.data
+    const { id } = node.data
     if (collapsedSet.has(id)) {
       const apexX = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
       const y = node.x!
@@ -212,7 +220,6 @@ function renderCollapsedTriangles({
         // the whole triangle is a click/hover target that opens the
         // branch menu (Expand this node); the apex bubble's own click entry is
         // skipped for collapsed nodes so this descriptive label wins
-        const label = name === id ? 'Collapsed clade' : name
         clickMap?.insert({
           minX: apexX + ml,
           maxX: baseX + ml,
@@ -220,7 +227,7 @@ function renderCollapsedTriangles({
           maxY: y + halfHeight,
           branch: true,
           id,
-          name: count === undefined ? label : `${label} (${count} tips)`,
+          name: cladeName(node, 'Collapsed clade'),
         })
       }
     }
@@ -266,7 +273,7 @@ function renderNodeBubbles({
     }
     const { data } = node
     const y = node.x!
-    const { id, name } = data
+    const { id } = data
     if (node.height >= 1 && inYBlock(y, offsetY, by, blockPad(model))) {
       const isCollapsed = collapsedSet.has(id)
       if (draw) {
@@ -290,7 +297,7 @@ function renderNodeBubbles({
           maxY: y - radius + d,
           branch: true,
           id,
-          name,
+          name: cladeName(node, 'Clade'),
         })
       }
     }
@@ -572,9 +579,9 @@ function renderCladeBrackets({
   ctx.strokeStyle = theme.palette.text.primary
 }
 
-// the `rowTint` encoding and the row sets of `highlights`, washed across the
-// tree area under the labels, with each set's label in the gutter at its first
-// row
+// the `rowTint` encoding, the reference row and the row sets of `highlights`,
+// washed across the tree area under the labels, with each set's label in the
+// gutter at its first row
 function renderRowHighlights({
   ctx,
   model,
@@ -591,6 +598,7 @@ function renderRowHighlights({
   const {
     resolvedHighlights,
     rowTints,
+    referenceRowIndex,
     rowHeight,
     treeAreaWidth,
     marginLeft,
@@ -616,6 +624,10 @@ function renderRowHighlights({
       }
     }
   }
+  if (referenceRowIndex !== undefined) {
+    ctx.fillStyle = referenceColor
+    fillRow(referenceRowIndex)
+  }
   for (const { rowIndices, label, color } of resolvedHighlights) {
     ctx.fillStyle = color ?? highlightRowFill
     for (const index of rowIndices) {

package/src/components/tree/renderTreeMouseover.ts

@@ -0,0 +1,41 @@
+import { treeHoverColor } from '../overlayColors.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+export function renderTreeMouseover({
+  ctx,
+  model,
+}: {
+  ctx: CanvasRenderingContext2D
+  model: MsaViewModel
+}) {
+  const {
+    rowHeight,
+    treeAreaWidth: width,
+    height,
+    scrollY,
+    mouseRow,
+    referenceRowIndex,
+    hoveredRowIndices,
+    highResScaleFactor,
+  } = model
+  ctx.resetTransform()
+  ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
+  ctx.scale(highResScaleFactor, highResScaleFactor)
+
+  const rowBand = (index: number) => {
+    ctx.fillRect(0, index * rowHeight + scrollY, width, rowHeight)
+  }
+
+  ctx.fillStyle = treeHoverColor
+  for (const index of hoveredRowIndices) {
+    rowBand(index)
+  }
+  if (
+    mouseRow !== undefined &&
+    mouseRow !== referenceRowIndex &&
+    !hoveredRowIndices.includes(mouseRow)
+  ) {
+    rowBand(mouseRow)
+  }
+}