react-msaview 8.1.0 → 8.3.0

package/src/components/msa/MSACanvasBlock.tsx

@@ -23,13 +23,8 @@ const MSACanvasBlock = observer(function ({
 }) {
   const { blockSize, highResScaleFactor } = model
   const theme = useTheme()
-  const { tooltipPoint, onMouseMove, onClick, onMouseLeave } = useMsaBlockMouse(
-    {
-      model,
-      offsetX,
-      offsetY,
-    },
-  )
+  const { anchor, onMouseMove, onMouseDown, onClick, onMouseLeave } =
+    useMsaBlockMouse({ model, offsetX, offsetY })
 
   const canvasSize = blockSize * highResScaleFactor
   const ref = useCanvasAutorun({
@@ -76,6 +71,7 @@ const MSACanvasBlock = observer(function ({
             onMouseMove(event, ref.current)
           }
         }}
+        onMouseDown={onMouseDown}
         onClick={event => {
           if (ref.current) {
             onClick(event, ref.current)
@@ -94,10 +90,8 @@ const MSACanvasBlock = observer(function ({
           height: blockSize,
         }}
       />
-      {tooltipPoint ? (
-        <BaseTooltip
-          clientPoint={{ x: tooltipPoint.x, y: tooltipPoint.y + 15 }}
-        >
+      {anchor ? (
+        <BaseTooltip clientPoint={anchor.clientPoint}>
           {hoveredInsertion ? (
             <>
               Insertion ({hoveredInsertion.letters.length}

package/src/components/msa/msaKeys.ts

@@ -0,0 +1,39 @@
+import type { MsaViewModel } from '../../model.ts'
+
+export function onMsaKey(
+  model: MsaViewModel,
+  { key, shiftKey }: { key: string; shiftKey: boolean },
+) {
+  const { colWidth, rowHeight, msaCanvasWidth, msaAreaHeight } = model
+  const dx = shiftKey ? msaCanvasWidth : colWidth
+  const dy = shiftKey ? msaAreaHeight : rowHeight
+  switch (key) {
+    case 'ArrowLeft':
+      model.doScrollX(dx)
+      return true
+    case 'ArrowRight':
+      model.doScrollX(-dx)
+      return true
+    case 'ArrowUp':
+      model.doScrollY(dy)
+      return true
+    case 'ArrowDown':
+      model.doScrollY(-dy)
+      return true
+    case '+':
+    case '=':
+      model.zoomIn()
+      return true
+    case '-':
+      model.zoomOut()
+      return true
+    case 'Home':
+      model.setScrollX(0)
+      return true
+    case 'End':
+      model.setScrollX(model.maxScrollX)
+      return true
+    default:
+      return false
+  }
+}

package/src/components/msa/useMsaBlockMouse.ts

@@ -1,8 +1,12 @@
-import { useState } from 'react'
+import { useRef } from 'react'
+
+import { useHoverAnchor } from '../useHoverAnchor.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type React from 'react'
 
+const maxClickTravel = 3
+
 function eventToColRow({
   event,
   el,
@@ -44,7 +48,8 @@ export function useMsaBlockMouse({
   offsetX: number
   offsetY: number
 }) {
-  const [tooltipPoint, setTooltipPoint] = useState<{ x: number; y: number }>()
+  const { anchor, hoverAt, clearAnchor } = useHoverAnchor<true>()
+  const downAt = useRef<{ x: number; y: number }>(undefined)
 
   function colRow(event: React.MouseEvent, el: HTMLElement) {
     const { colWidth, rowHeight } = model
@@ -65,12 +70,23 @@ export function useMsaBlockMouse({
 
     const hasTooltip =
       !!model.hoveredInsertion || model.mouseOverDomains.length > 0
-    setTooltipPoint(
-      hasTooltip ? { x: event.clientX, y: event.clientY } : undefined,
-    )
+    hoverAt(event, hasTooltip || undefined)
+  }
+
+  function onMouseDown(event: React.MouseEvent) {
+    downAt.current = { x: event.clientX, y: event.clientY }
   }
 
   function onClick(event: React.MouseEvent, el: HTMLElement) {
+    const down = downAt.current
+    downAt.current = undefined
+    if (
+      down &&
+      Math.hypot(event.clientX - down.x, event.clientY - down.y) >
+        maxClickTravel
+    ) {
+      return
+    }
     const pos = colRow(event, el)
     const { col, row } = pos
     const { mouseClickCol, mouseClickRow } = model
@@ -83,8 +99,8 @@ export function useMsaBlockMouse({
 
   function onMouseLeave() {
     model.setMousePos()
-    setTooltipPoint(undefined)
+    clearAnchor()
   }
 
-  return { tooltipPoint, onMouseMove, onClick, onMouseLeave }
+  return { anchor, onMouseMove, onMouseDown, onClick, onMouseLeave }
 }

package/src/components/rowpanels/RowPanelBlock.tsx

@@ -1,23 +1,17 @@
-import React, { useState } from 'react'
+import React from 'react'
 
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { featureField, featureName } from '../../featureFields.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import PortalTooltip from '../PortalTooltip.tsx'
+import { useHoverAnchor } from '../useHoverAnchor.ts'
 import { renderRowPanel } from './renderRowPanel.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { ResolvedRowPanel } from '../../types.ts'
 
-interface Hover {
-  name: string
-  lines: string[]
-  clientX: number
-  clientY: number
-}
-
 // what the cell or span under the pointer reads, which is the field a strip
 // colors by, and a span's name, its coordinates and its encoded field
 function hoverLines({
@@ -66,7 +60,10 @@ const RowPanelBlock = observer(function ({
   panel: ResolvedRowPanel
   offsetY: number
 }) {
-  const [hovered, setHovered] = useState<Hover>()
+  const { anchor, hoverAt, clearAnchor } = useHoverAnchor<{
+    name: string
+    lines: string[]
+  }>()
   const theme = useTheme()
   const { blockSize, highResScaleFactor, rowHeight } = model
   const width = panel.width
@@ -107,30 +104,26 @@ const RowPanelBlock = observer(function ({
                   name,
                   x: event.clientX - left,
                 })
-          setHovered(
+          hoverAt(
+            event,
             name === undefined || lines.length === 0
               ? undefined
-              : {
-                  name,
-                  lines,
-                  clientX: event.clientX,
-                  clientY: event.clientY,
-                },
+              : { name, lines },
           )
           model.setMousePos(undefined, name === undefined ? undefined : row)
         }}
         onMouseLeave={() => {
-          setHovered(undefined)
+          clearAnchor()
           model.setMousePos(undefined, undefined)
         }}
       />
-      {hovered ? (
-        <PortalTooltip clientX={hovered.clientX} clientY={hovered.clientY}>
-          <div>{hovered.name}</div>
-          {hovered.lines.map(line => (
+      {anchor ? (
+        <BaseTooltip clientPoint={anchor.clientPoint}>
+          <div>{anchor.value.name}</div>
+          {anchor.value.lines.map(line => (
             <div key={line}>{line}</div>
           ))}
-        </PortalTooltip>
+        </BaseTooltip>
       ) : null}
     </>
   )

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,4 @@
-import { useState } from 'react'
+import { useHoverAnchor } from '../useHoverAnchor.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type React from 'react'
@@ -18,7 +18,7 @@ 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
@@ -29,14 +29,14 @@ export function useTrackHover({
     const hit = col >= 0 && col < numColumns
     model.setMousePos(hit ? col : undefined, undefined)
     if (tooltip) {
-      setHover(hit ? { col, x: event.clientX, y: event.clientY } : undefined)
+      hoverAt(event, hit ? col : undefined)
     }
   }
 
   function onMouseLeave() {
-    setHover(undefined)
+    clearAnchor()
     model.setMousePos(undefined, undefined)
   }
 
-  return { hover: tooltip ? hover : undefined, onMouseMove, onMouseLeave }
+  return { anchor: tooltip ? anchor : undefined, onMouseMove, 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}