react-msaview 6.5.0 → 8.0.0

package/src/components/tree/TreeCanvasBlock.tsx

@@ -3,31 +3,17 @@ import React, { useState } from 'react'
 import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
-import { createPortal } from 'react-dom'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
+import PortalTooltip from '../PortalTooltip.tsx'
 import TreeBranchMenu from './TreeBranchMenu.tsx'
 import TreeNodeMenu from './TreeNodeMenu.tsx'
-import { padding, renderTreeCanvas } from './renderTreeCanvas.ts'
+import { renderTreeCanvas } from './renderTreeCanvas.ts'
 import { useTreeHover } from './useTreeHover.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-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',
-  },
+const useStyles = makeStyles()(() => ({
   hover: {
     position: 'absolute',
     pointerEvents: 'none',
@@ -58,7 +44,8 @@ const TreeCanvasBlock = observer(function ({
     useTreeHover({ model, offsetY })
 
   const { treeAreaWidth, blockSize, highResScaleFactor } = model
-  const width = treeAreaWidth + padding
+  // TreePanel clips to treeAreaWidth, so a wider canvas is wasted backing store
+  const width = treeAreaWidth
   const height = blockSize
 
   const canvasWidth = width * highResScaleFactor
@@ -152,20 +139,11 @@ const TreeCanvasBlock = observer(function ({
         />
       ) : null}
 
-      {/* portaled: the block set sits under a transform, which would otherwise
-      make this fixed tooltip position against the scrolled tree instead of the
-      window */}
-      {hovered
-        ? createPortal(
-            <div
-              className={classes.tooltip}
-              style={{ left: hovered.clientX + 12, top: hovered.clientY + 12 }}
-            >
-              {hovered.name}
-            </div>,
-            document.body,
-          )
-        : null}
+      {hovered ? (
+        <PortalTooltip clientX={hovered.clientX} clientY={hovered.clientY}>
+          {hovered.name}
+        </PortalTooltip>
+      ) : null}
     </>
   )
 })

package/src/components/tree/TreeOverview.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react'
+
+import { useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
+import {
+  drawTreeOverview,
+  drawTreeOverviewBox,
+  treeOverviewImage,
+} from './renderTreeOverview.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+/**
+ * The brush on the row scale: the whole tree drawn small above the tree panel,
+ * with the focused subtree boxed. A click focuses the subtree under the
+ * pointer, and a click inside the box clears the focus.
+ *
+ * The tree itself comes off a cached offscreen canvas, so the frames a pointer
+ * moving across it costs are a blit and two boxes.
+ */
+const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
+  const { treeAreaWidth, overviewHeight, highResScaleFactor } = model
+  const theme = useTheme()
+  const [hover, setHover] = useState<{ id: string; rows: [number, number] }>()
+  const width = Math.round(treeAreaWidth * highResScaleFactor)
+  const height = Math.round(overviewHeight * highResScaleFactor)
+
+  const ref = useCanvasAutorun({
+    draw: ctx => {
+      ctx.resetTransform()
+      ctx.clearRect(0, 0, width, height)
+      const image = treeOverviewImage({
+        model,
+        theme,
+        width: treeAreaWidth,
+        height: overviewHeight,
+        scale: highResScaleFactor,
+      })
+      ctx.scale(highResScaleFactor, highResScaleFactor)
+      const box = { model, ctx, width: treeAreaWidth, height: overviewHeight }
+      if (image) {
+        ctx.drawImage(
+          image,
+          0,
+          0,
+          image.width,
+          image.height,
+          0,
+          0,
+          box.width,
+          box.height,
+        )
+      } else {
+        drawTreeOverview({ ...box, theme })
+      }
+      if (hover) {
+        drawTreeOverviewBox({
+          ...box,
+          rows: hover.rows,
+          color: theme.palette.text.secondary,
+        })
+      }
+      const focus = model.treeOverviewFocusRows
+      if (focus) {
+        drawTreeOverviewBox({
+          ...box,
+          rows: focus,
+          color: theme.palette.text.primary,
+        })
+      }
+    },
+    width,
+    height,
+    deps: [model, theme, hover],
+  })
+
+  return (
+    <canvas
+      data-testid="tree_overview"
+      ref={ref}
+      width={width}
+      height={height}
+      style={{
+        display: 'block',
+        flexShrink: 0,
+        cursor: 'pointer',
+        width: treeAreaWidth,
+        height: overviewHeight,
+      }}
+      onMouseMove={event => {
+        const hit = model.treeOverviewHit(event.nativeEvent.offsetY)
+        setHover(prev => (prev?.id === hit?.id ? prev : hit))
+      }}
+      onMouseLeave={() => {
+        setHover(undefined)
+      }}
+      onClick={event => {
+        model.treeOverviewClick(event.nativeEvent.offsetY)
+      }}
+    />
+  )
+})
+
+export default TreeOverview

package/src/components/tree/TreeRuler.tsx

@@ -1,16 +1,40 @@
 import React from 'react'
 
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { treeScaleBarHeight as h } from '../../constants.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 
-// The gutter above the tree panel. It spans the resize handle too, so whatever
-// follows it in the top row starts exactly where the alignment canvas does --
-// MainArea has TreePanel + VerticalResizeHandle before the alignment.
+// The gutter above the tree panel, the width of the tree area, so the strip
+// headers beside it start where the strips do. A phylogram fills it with a
+// scale bar: without one the branch lengths are drawn to a scale nothing
+// states.
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeAreaWidth, resizeHandleWidth } = model
+  const { treeAreaWidth, marginLeft, treeScaleBar: bar } = model
+  const theme = useTheme()
+
   return (
-    <div style={{ flexShrink: 0, width: treeAreaWidth + resizeHandleWidth }} />
+    <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>
+      ) : null}
+    </div>
   )
 })
 

package/src/components/tree/cladeBrackets.ts

@@ -0,0 +1,73 @@
+import { measureTextCanvas } from '../../measureTextCanvas.ts'
+
+import type { ResolvedClade } from '../../types.ts'
+
+// The bar of the bracket mark and the space around it, in px.
+export const bracketBarWidth = 3
+export const bracketGap = 4
+
+// The widest gutter the bracket mark takes. A longer label is clipped, so one
+// long name cannot squeeze the tree it annotates.
+export const maxCladeGutterWidth = 140
+
+/** whether a clade draws in the gutter: a bracket, or a highlight with a label */
+export function cladeInGutter(clade: ResolvedClade) {
+  return (
+    clade.mark === 'bracket' || (clade.mark === 'highlight' && !!clade.label)
+  )
+}
+
+/** the pixel height of the rows a clade covers */
+export function cladeHeight(clade: ResolvedClade, rowHeight: number) {
+  return (clade.rows[1] - clade.rows[0] + 1) * rowHeight
+}
+
+/**
+ * Whether a label reads across the rows. It does where they are taller than the
+ * font, and runs up the bar where they are not.
+ */
+export function cladeLabelHorizontal(
+  clade: ResolvedClade,
+  rowHeight: number,
+  fontSize: number,
+) {
+  return cladeHeight(clade, rowHeight) >= fontSize
+}
+
+/** the px between the left edge of the gutter and the label's own column */
+export function cladeLabelOffset(clade: ResolvedClade) {
+  return clade.mark === 'bracket'
+    ? bracketGap + bracketBarWidth + bracketGap
+    : bracketGap
+}
+
+/**
+ * The gutter the bracket mark needs at the right of the tree area: the bar plus
+ * the widest label at the tree font, zero where no clade draws there, and at
+ * most maxCladeGutterWidth.
+ */
+export function cladeGutterWidth({
+  clades,
+  rowHeight,
+  fontSize,
+}: {
+  clades: ResolvedClade[]
+  rowHeight: number
+  fontSize: number
+}) {
+  let widest = 0
+  for (const clade of clades) {
+    if (!cladeInGutter(clade)) {
+      continue
+    }
+    const text = clade.label
+      ? cladeLabelHorizontal(clade, rowHeight, fontSize)
+        ? measureTextCanvas(clade.label, fontSize)
+        : fontSize
+      : 0
+    widest = Math.max(widest, cladeLabelOffset(clade) + text + bracketGap)
+  }
+  // a whole pixel, so the room the renderers measure against covers the label
+  // the measurement here sized the gutter for
+  return Math.min(maxCladeGutterWidth, Math.ceil(widest))
+}

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

@@ -21,8 +21,8 @@ const TreeNodeInfoDialog = observer(function ({
   nodeName: string
   onClose: () => void
 }) {
-  const { treeMetadata, rows } = model
-  const metadata = treeMetadata[nodeName]
+  const { rows } = model
+  const metadata = model.rowDataOf(nodeName)
   const res = rows.find(f => f[0] === nodeName)
   return (
     <Dialog