react-msaview 2.1.5 → 3.0.1

package/src/components/TreePanel/renderTreeCanvas.ts

@@ -0,0 +1,254 @@
+import RBush from 'rbush'
+
+// locals
+import { MsaViewModel } from '../../model'
+import { Theme } from '@mui/material'
+
+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,
+  theme,
+}: {
+  offsetY: number
+  ctx: CanvasRenderingContext2D
+  model: MsaViewModel
+  theme: Theme
+}) {
+  const { hierarchy, showBranchLen, blockSize } = model
+  ctx.strokeStyle = theme.palette.text.primary
+  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
+  theme: Theme
+}) {
+  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({
+  theme,
+  model,
+  offsetY,
+  ctx,
+  clickMap,
+}: {
+  model: MsaViewModel
+  offsetY: number
+  ctx: CanvasRenderingContext2D
+  clickMap: RBush<ClickEntry>
+  theme: Theme
+}) {
+  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' : theme.palette.text.primary
+
+      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,
+  theme,
+}: {
+  model: MsaViewModel
+  offsetY: number
+  ctx: CanvasRenderingContext2D
+  clickMap: RBush<ClickEntry>
+  theme: Theme
+}) {
+  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, theme })
+
+    if (drawNodeBubbles) {
+      renderNodeBubbles({ ctx, offsetY, clickMap, model, theme })
+    }
+  }
+
+  if (rowHeight >= 5) {
+    renderTreeLabels({ ctx, offsetY, model, clickMap, theme })
+  }
+}

package/src/components/dialogs/SettingsDialog.tsx

@@ -0,0 +1,196 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  Button,
+  Checkbox,
+  DialogActions,
+  DialogContent,
+  FormControlLabel,
+  FormControlLabelProps,
+  MenuItem,
+  Slider,
+  TextField,
+  Typography,
+} from '@mui/material'
+
+import { MsaViewModel } from '../../model'
+import colorSchemes from '../../colorSchemes'
+
+const useStyles = makeStyles()(theme => ({
+  field: {
+    margin: theme.spacing(4),
+  },
+  flex: {
+    display: 'flex',
+  },
+}))
+
+function FormControlLabel2(rest: FormControlLabelProps) {
+  return (
+    <div>
+      <FormControlLabel {...rest} />
+    </div>
+  )
+}
+
+const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
+  const { classes } = useStyles()
+  const {
+    bgColor,
+    colWidth,
+    colorSchemeName,
+    drawTree,
+    drawNodeBubbles,
+    labelsAlignRight,
+    noTree,
+    rowHeight,
+    showBranchLen,
+    treeWidthMatchesArea,
+    treeWidth,
+  } = model
+  return (
+    <>
+      <div>
+        <Button onClick={() => model.clearHidden()}>Clear hidden</Button>
+        <h1>Tree options</h1>
+        <FormControlLabel2
+          control={
+            <Checkbox
+              checked={showBranchLen}
+              onChange={() => model.setShowBranchLen(!showBranchLen)}
+            />
+          }
+          label="Show branch length?"
+        />
+
+        <FormControlLabel2
+          control={
+            <Checkbox
+              checked={drawNodeBubbles}
+              onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
+            />
+          }
+          label="Draw clickable bubbles on tree branches?"
+        />
+        <FormControlLabel2
+          control={
+            <Checkbox
+              checked={drawTree}
+              onChange={() => model.setDrawTree(!drawTree)}
+            />
+          }
+          label="Show tree?"
+        />
+
+        <FormControlLabel2
+          control={
+            <Checkbox
+              checked={labelsAlignRight}
+              onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
+            />
+          }
+          label="Tree labels align right?"
+        />
+        {!noTree ? (
+          <div>
+            <FormControlLabel2
+              control={
+                <Checkbox
+                  checked={treeWidthMatchesArea}
+                  onChange={() =>
+                    model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
+                  }
+                />
+              }
+              label="Make tree width fit to tree area?"
+            />
+            {!treeWidthMatchesArea ? (
+              <div className={classes.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}
+      </div>
+      <div>
+        <h1>MSA options</h1>
+
+        <FormControlLabel2
+          control={
+            <Checkbox
+              checked={bgColor}
+              onChange={() => model.setBgColor(!bgColor)}
+            />
+          }
+          label="Color background tiles of MSA?"
+        />
+
+        <div className={classes.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 className={classes.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
+          label="Color scheme"
+          value={colorSchemeName}
+          onChange={event => model.setColorSchemeName(event.target.value)}
+        >
+          {Object.keys(colorSchemes).map(option => (
+            <MenuItem key={option} value={option}>
+              {option}
+            </MenuItem>
+          ))}
+        </TextField>
+      </div>
+    </>
+  )
+})
+
+const SettingsDialog = observer(function ({
+  model,
+  onClose,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  return (
+    <Dialog open onClose={() => onClose()} title="Settings">
+      <DialogContent>
+        <SettingsContent model={model} />
+        <DialogActions>
+          <Button onClick={() => onClose()} variant="contained" color="primary">
+            Submit
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+export default SettingsDialog