react-msaview 2.1.5 → 3.0.0

package/src/components/TreePanel/TreeCanvasBlock.tsx

@@ -0,0 +1,190 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { autorun } from 'mobx'
+import { observer } from 'mobx-react'
+import RBush from 'rbush'
+
+// locals
+import { MsaViewModel } from '../../model'
+import TreeMenu from './TreeMenu'
+import TreeBranchMenu from './TreeBranchMenu'
+import { padding, renderTreeCanvas } from './renderTreeCanvas'
+
+interface TooltipData {
+  name: string
+  id: string
+  x: number
+  y: number
+}
+
+interface ClickEntry {
+  name: string
+  id: string
+  branch?: boolean
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+const TreeCanvasBlock = observer(function ({
+  model,
+  offsetY,
+}: {
+  model: MsaViewModel
+  offsetY: number
+}) {
+  const ref = useRef<HTMLCanvasElement>()
+  const clickMap = useRef(new RBush<ClickEntry>())
+  const mouseoverRef = useRef<HTMLCanvasElement>(null)
+  const [branchMenu, setBranchMenu] = useState<TooltipData>()
+  const [toggleNodeMenu, setToggleNodeMenu] = useState<TooltipData>()
+  const [hoverElt, setHoverElt] = useState<ClickEntry>()
+
+  const { scrollY, treeAreaWidth, margin, blockSize, highResScaleFactor } =
+    model
+
+  const width = treeAreaWidth + padding
+  const height = blockSize
+  const w2 = width * highResScaleFactor
+  const h2 = height * highResScaleFactor
+
+  const vref = useCallback(
+    (arg: HTMLCanvasElement) => {
+      model.incrementRef()
+      ref.current = arg
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width],
+  )
+  useEffect(() => {
+    const ctx = ref.current?.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    return autorun(() => {
+      renderTreeCanvas({
+        ctx,
+        model,
+        offsetY,
+        clickMap: clickMap.current,
+      })
+    })
+  }, [model, offsetY])
+
+  useEffect(() => {
+    const ctx = mouseoverRef.current?.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    ctx.resetTransform()
+    ctx.clearRect(0, 0, treeAreaWidth + padding, blockSize)
+    ctx.translate(margin.left, -offsetY)
+
+    if (hoverElt) {
+      const { minX, maxX, minY, maxY } = hoverElt
+
+      ctx.fillStyle = 'rgba(0,0,0,0.1)'
+      ctx.fillRect(minX, minY, maxX - minX, maxY - minY)
+    }
+  }, [hoverElt, margin.left, offsetY, blockSize, treeAreaWidth])
+
+  function hoverBranchClickMap(event: React.MouseEvent) {
+    const x = event.nativeEvent.offsetX - margin.left
+    const y = event.nativeEvent.offsetY
+
+    const [entry] = clickMap.current.search({
+      minX: x,
+      maxX: x + 1,
+      minY: y + offsetY,
+      maxY: y + 1 + offsetY,
+    })
+
+    return entry && entry.branch
+      ? { ...entry, x: event.clientX, y: event.clientY }
+      : undefined
+  }
+
+  function hoverNameClickMap(event: React.MouseEvent) {
+    const x = event.nativeEvent.offsetX - margin.left
+    const y = event.nativeEvent.offsetY
+    const [entry] = clickMap.current.search({
+      minX: x,
+      maxX: x + 1,
+      minY: y + offsetY,
+      maxY: y + 1 + offsetY,
+    })
+
+    return entry && !entry.branch
+      ? { ...entry, x: event.clientX, y: event.clientY }
+      : undefined
+  }
+  const style = {
+    width,
+    height,
+    top: scrollY + offsetY,
+    left: 0,
+    position: 'absolute',
+  } as const
+  return (
+    <>
+      {branchMenu?.id ? (
+        <TreeBranchMenu
+          node={branchMenu}
+          model={model}
+          onClose={() => setBranchMenu(undefined)}
+        />
+      ) : null}
+
+      {toggleNodeMenu?.id ? (
+        <TreeMenu
+          node={toggleNodeMenu}
+          model={model}
+          onClose={() => setToggleNodeMenu(undefined)}
+        />
+      ) : null}
+
+      <canvas
+        width={w2}
+        height={h2}
+        style={style}
+        onMouseMove={event => {
+          if (!ref.current) {
+            return
+          }
+
+          const ret = hoverNameClickMap(event) || hoverBranchClickMap(event)
+          ref.current.style.cursor = ret ? 'pointer' : 'default'
+          setHoverElt(hoverNameClickMap(event))
+        }}
+        onClick={event => {
+          const { clientX: x, clientY: y } = event
+
+          const data = hoverBranchClickMap(event)
+          if (data?.id) {
+            setBranchMenu({ ...data, x, y })
+          }
+
+          const data2 = hoverNameClickMap(event)
+          if (data2?.id) {
+            setToggleNodeMenu({ ...data2, x, y })
+          }
+        }}
+        ref={vref}
+      />
+      <canvas
+        style={{
+          ...style,
+          pointerEvents: 'none',
+          zIndex: 100,
+        }}
+        width={width}
+        height={height}
+        ref={mouseoverRef}
+      />
+    </>
+  )
+})
+
+export default TreeCanvasBlock

package/src/components/{TreeMenu.tsx → TreePanel/TreeMenu.tsx}

@@ -3,7 +3,7 @@ import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
 const TreeNodeInfoDlg = lazy(() => import('./dialogs/TreeNodeInfoDlg'))
 
@@ -39,11 +39,15 @@ const TreeMenu = observer(function ({
         <MenuItem
           dense
           onClick={() => {
-            model.setDialogComponent(TreeNodeInfoDlg, {
-              info: model.getRowData(node.name),
-              model,
-              nodeName: node.name,
-            })
+            model.queueDialog(onClose => [
+              TreeNodeInfoDlg,
+              {
+                info: model.getRowData(node.name),
+                model,
+                nodeName: node.name,
+                onClose,
+              },
+            ])
             onClose()
           }}
         >

package/src/components/{TreeRuler.tsx → TreePanel/TreeRuler.tsx}

@@ -2,11 +2,11 @@ import React from 'react'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeWidth } = model
-  return <div style={{ width: treeWidth }} />
+  const { treeAreaWidth } = model
+  return <div style={{ flexShrink: 0, width: treeAreaWidth }} />
 })
 
 export default TreeRuler

package/src/components/{dialogs → TreePanel/dialogs}/TreeNodeInfoDlg.tsx

@@ -6,7 +6,7 @@ import {
   Attributes,
   BaseCard,
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import { MsaViewModel } from '../../model'
+import { MsaViewModel } from '../../../model'
 
 export default observer(function ({
   info,

package/src/components/TreePanel/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+import { MsaViewModel } from '../../model'
+import TreeCanvas from './TreeCanvas'
+
+const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
+  const { treeAreaWidth } = model
+  return (
+    <div style={{ flexShrink: 0, width: treeAreaWidth }}>
+      <TreeCanvas model={model} />
+    </div>
+  )
+})
+
+export default TreePanel

package/src/components/TreePanel/renderTreeCanvas.ts

@@ -0,0 +1,245 @@
+import RBush from 'rbush'
+
+// locals
+import { MsaViewModel } from '../../model'
+
+export const padding = 600
+const extendBounds = 5
+const radius = 2.5
+const d = radius * 2
+
+interface ClickEntry {
+  name: string
+  id: string
+  branch?: boolean
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+export function renderTree({
+  offsetY,
+  ctx,
+  model,
+}: {
+  offsetY: number
+  ctx: CanvasRenderingContext2D
+  model: MsaViewModel
+}) {
+  const { hierarchy, showBranchLen, blockSize } = model
+  for (const { source, target } of hierarchy.links()) {
+    const y = showBranchLen ? 'len' : 'y'
+    // @ts-expect-error
+    const { x: sy, [y]: sx } = source
+    // @ts-expect-error
+    const { x: ty, [y]: tx } = target
+
+    const y1 = Math.min(sy, ty)
+    const y2 = Math.max(sy, ty)
+    // 1d line intersection to check if line crosses block at all, this is
+    // an optimization that allows us to skip drawing most tree links
+    // outside the block
+    if (offsetY + blockSize >= y1 && y2 >= offsetY) {
+      ctx.beginPath()
+      ctx.moveTo(sx, sy)
+      ctx.lineTo(sx, ty)
+      ctx.lineTo(tx, ty)
+      ctx.stroke()
+    }
+  }
+}
+
+export function renderNodeBubbles({
+  ctx,
+  clickMap,
+  offsetY,
+  model,
+}: {
+  ctx: CanvasRenderingContext2D
+  clickMap: RBush<ClickEntry>
+  offsetY: number
+  model: MsaViewModel
+}) {
+  const { hierarchy, showBranchLen, collapsed, blockSize } = model
+  for (const node of hierarchy.descendants()) {
+    const val = showBranchLen ? 'len' : 'y'
+    const {
+      // @ts-expect-error
+      x: y,
+      // @ts-expect-error
+      [val]: x,
+      data,
+    } = node
+    const { branchset, id = '', name = '' } = data
+    if (
+      branchset.length &&
+      y > offsetY - extendBounds &&
+      y < offsetY + blockSize + extendBounds
+    ) {
+      ctx.strokeStyle = 'black'
+      ctx.fillStyle = collapsed.includes(id) ? 'black' : 'white'
+      ctx.beginPath()
+      ctx.arc(x, y, radius, 0, 2 * Math.PI)
+      ctx.fill()
+      ctx.stroke()
+
+      clickMap.insert({
+        minX: x - radius,
+        maxX: x - radius + d,
+        minY: y - radius,
+        maxY: y - radius + d,
+        branch: true,
+        id,
+        name,
+      })
+    }
+  }
+}
+
+export function renderTreeLabels({
+  model,
+  offsetY,
+  ctx,
+  clickMap,
+}: {
+  model: MsaViewModel
+  offsetY: number
+  ctx: CanvasRenderingContext2D
+  clickMap: RBush<ClickEntry>
+}) {
+  const {
+    rowHeight,
+    showBranchLen,
+    treeMetadata,
+    hierarchy,
+    blockSize,
+    labelsAlignRight,
+    drawTree,
+    structures,
+    treeAreaWidth,
+    margin,
+    noTree,
+  } = model
+  if (labelsAlignRight) {
+    ctx.textAlign = 'right'
+    ctx.setLineDash([1, 3])
+  } else {
+    ctx.textAlign = 'start'
+  }
+  for (const node of hierarchy.leaves()) {
+    const {
+      // @ts-expect-error
+      x: y,
+      // @ts-expect-error
+      y: x,
+      data: { name, id },
+      // @ts-expect-error
+      len,
+    } = node
+
+    const displayName = treeMetadata[name]?.genome || name
+
+    if (y > offsetY - extendBounds && y < offsetY + blockSize + extendBounds) {
+      // note: +rowHeight/4 matches with -rowHeight/4 in msa
+      const yp = y + rowHeight / 4
+      const xp = showBranchLen ? len : x
+
+      const { width } = ctx.measureText(displayName)
+      const height = ctx.measureText('M').width // use an 'em' for height
+
+      const hasStructure = structures[name]
+      ctx.fillStyle = hasStructure ? 'blue' : 'black'
+
+      if (!drawTree && !labelsAlignRight) {
+        ctx.fillText(displayName, 0, yp)
+        clickMap.insert({
+          minX: 0,
+          maxX: width,
+          minY: yp - height,
+          maxY: yp,
+          name,
+          id,
+        })
+      } else if (labelsAlignRight) {
+        const smallPadding = 2
+        const offset = treeAreaWidth - smallPadding - margin.left
+        if (drawTree && !noTree) {
+          const { width } = ctx.measureText(displayName)
+          ctx.moveTo(xp + radius + 2, y)
+          ctx.lineTo(offset - smallPadding - width, y)
+          ctx.stroke()
+        }
+        ctx.fillText(displayName, offset, yp)
+        clickMap.insert({
+          minX: treeAreaWidth - margin.left - width,
+          maxX: treeAreaWidth - margin.left,
+          minY: yp - height,
+          maxY: yp,
+          name,
+          id,
+        })
+      } else {
+        ctx.fillText(displayName, xp + d, yp)
+        clickMap.insert({
+          minX: xp + d,
+          maxX: xp + d + width,
+          minY: yp - height,
+          maxY: yp,
+          name,
+          id,
+        })
+      }
+    }
+  }
+  ctx.setLineDash([])
+}
+
+export function renderTreeCanvas({
+  model,
+  clickMap,
+  ctx,
+  offsetY,
+}: {
+  model: MsaViewModel
+  offsetY: number
+  ctx: CanvasRenderingContext2D
+  clickMap: RBush<ClickEntry>
+}) {
+  clickMap.clear()
+  const {
+    noTree,
+    drawTree,
+    drawNodeBubbles,
+    treeWidth,
+    highResScaleFactor,
+    margin,
+    blockSize,
+    fontSize,
+    rowHeight,
+    // nref has to be kept as a unused var or at least reference to force
+    // redraw after canvas ref change
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    nref,
+  } = model
+
+  ctx.resetTransform()
+  ctx.scale(highResScaleFactor, highResScaleFactor)
+  ctx.clearRect(0, 0, treeWidth + padding, blockSize)
+  ctx.translate(margin.left, -offsetY)
+
+  const font = ctx.font
+  ctx.font = font.replace(/\d+px/, `${fontSize}px`)
+
+  if (!noTree && drawTree) {
+    renderTree({ ctx, offsetY, model })
+
+    if (drawNodeBubbles) {
+      renderNodeBubbles({ ctx, offsetY, clickMap, model })
+    }
+  }
+
+  if (rowHeight >= 5) {
+    renderTreeLabels({ ctx, offsetY, model, clickMap })
+  }
+}

package/src/components/dialogs/{SettingsDlg.tsx → SettingsDialog.tsx}

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 import { Dialog } from '@jbrowse/core/ui'
@@ -9,7 +9,9 @@ import {
   DialogContent,
   FormControlLabel,
   MenuItem,
+  Slider,
   TextField,
+  Typography,
 } from '@mui/material'
 
 import { MsaViewModel } from '../../model'
@@ -29,17 +31,19 @@ const SettingsDialog = observer(function ({
   onClose: () => void
 }) {
   const { classes } = useStyles()
-  const { colorSchemeName, noTree } = model
-  const [rowHeight, setRowHeight] = useState(`${model.rowHeight}`)
-  const [colWidth, setColWidth] = useState(`${model.colWidth}`)
-  const [treeWidth, setTreeWidth] = useState(`${model.treeWidth}`)
-
-  function error(n: string) {
-    return Number.isNaN(+n) || +n < 0
-  }
-  const rowHeightError = error(rowHeight)
-  const colWidthError = error(colWidth)
-  const treeWidthError = error(treeWidth)
+  const {
+    bgColor,
+    colWidth,
+    colorSchemeName,
+    drawTree,
+    drawNodeBubbles,
+    labelsAlignRight,
+    noTree,
+    rowHeight,
+    showBranchLen,
+    treeWidthMatchesArea,
+    treeWidth,
+  } = model
 
   return (
     <Dialog open onClose={() => onClose()} title="Settings">
@@ -47,8 +51,8 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.showBranchLen}
-              onChange={() => model.toggleBranchLen()}
+              checked={showBranchLen}
+              onChange={() => model.setShowBranchLen(!showBranchLen)}
             />
           }
           label="Show branch length"
@@ -56,8 +60,8 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.bgColor}
-              onChange={() => model.toggleBgColor()}
+              checked={bgColor}
+              onChange={() => model.setBgColor(!bgColor)}
             />
           }
           label="Color background"
@@ -65,8 +69,8 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.drawNodeBubbles}
-              onChange={() => model.toggleNodeBubbles()}
+              checked={drawNodeBubbles}
+              onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
             />
           }
           label="Draw node bubbles"
@@ -74,8 +78,8 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.drawTree}
-              onChange={() => model.toggleDrawTree()}
+              checked={drawTree}
+              onChange={() => model.setDrawTree(!drawTree)}
             />
           }
           label="Draw tree (if available)"
@@ -83,39 +87,61 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.labelsAlignRight}
-              onChange={() => model.toggleLabelsAlignRight()}
+              checked={labelsAlignRight}
+              onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
             />
           }
-          label="Labels align right (note: labels may draw over tree, but can adjust tree width or tree area width in UI)"
+          label="Labels align right"
         />
 
-        <TextField
-          className={classes.field}
-          label="Row height (px)"
-          value={rowHeight}
-          error={rowHeightError}
-          onChange={event => setRowHeight(event.target.value)}
-        />
-        <TextField
-          className={classes.field}
-          label="Column width (px)"
-          value={colWidth}
-          error={colWidthError}
-          onChange={event => setColWidth(event.target.value)}
-        />
-        <br />
         {!noTree ? (
-          <TextField
-            className={classes.field}
-            label="Tree width (px)"
-            value={treeWidth}
-            error={treeWidthError}
-            onChange={event => setTreeWidth(event.target.value)}
-          />
+          <div>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={treeWidthMatchesArea}
+                  onChange={() =>
+                    model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
+                  }
+                />
+              }
+              label="Make tree width fit to tree area?"
+            />
+            {!treeWidthMatchesArea ? (
+              <div style={{ display: 'flex' }}>
+                <Typography>Tree width ({treeWidth}px)</Typography>
+                <Slider
+                  className={classes.field}
+                  min={50}
+                  max={600}
+                  value={treeWidth}
+                  onChange={(_, val) => model.setTreeWidth(val as number)}
+                />
+              </div>
+            ) : null}
+          </div>
         ) : null}
 
-        <br />
+        <div style={{ display: 'flex' }}>
+          <Typography>Column width ({colWidth}px)</Typography>
+          <Slider
+            className={classes.field}
+            min={1}
+            max={50}
+            value={colWidth}
+            onChange={(_, val) => model.setColWidth(val as number)}
+          />
+        </div>
+        <div style={{ display: 'flex' }}>
+          <Typography>Row height ({rowHeight}px)</Typography>
+          <Slider
+            className={classes.field}
+            min={1}
+            max={50}
+            value={rowHeight}
+            onChange={(_, val) => model.setRowHeight(val as number)}
+          />
+        </div>
 
         <TextField
           select
@@ -131,7 +157,6 @@ const SettingsDialog = observer(function ({
         </TextField>
         <DialogActions>
           <Button
-            disabled={rowHeightError || colWidthError || treeWidthError}
             onClick={() => {
               model.setRowHeight(+rowHeight)
               model.setColWidth(+colWidth)