react-msaview 2.1.5 → 3.0.1

package/src/components/TreeCanvasBlock.tsx

@@ -1,363 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { observer } from 'mobx-react'
-import RBush from 'rbush'
-
-// locals
-import { MsaViewModel } from '../model'
-import TreeMenu from './TreeMenu'
-import TreeBranchMenu from './TreeBranchMenu'
-
-const extendBounds = 5
-const radius = 3.5
-const d = radius * 2
-
-const padding = 600
-
-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>(null)
-  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 {
-    hierarchy,
-    rowHeight,
-    scrollY,
-    treeWidth,
-    treeMetadata,
-    showBranchLen,
-    collapsed,
-    margin,
-    labelsAlignRight,
-    noTree,
-    blockSize,
-    drawNodeBubbles,
-    drawTree,
-    treeAreaWidth,
-    structures,
-    highResScaleFactor,
-  } = model
-
-  useEffect(() => {
-    clickMap.current.clear()
-
-    if (!ref.current) {
-      return
-    }
-    const ctx = ref.current.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    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/, `${Math.max(8, rowHeight - 8)}px`)
-
-    if (!noTree && drawTree) {
-      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()
-        }
-      }
-
-      if (drawNodeBubbles) {
-        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 { id = '', name = '' } = data
-
-          if (
-            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.current.insert({
-              minX: x - radius,
-              maxX: x - radius + d,
-              minY: y - radius,
-              maxY: y - radius + d,
-              branch: true,
-              id,
-              name,
-            })
-          }
-        }
-      }
-    }
-
-    if (rowHeight >= 5) {
-      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.current.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.current.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.current.insert({
-              minX: xp + d,
-              maxX: xp + d + width,
-              minY: yp - height,
-              maxY: yp,
-              name,
-              id,
-            })
-          }
-        }
-      }
-      ctx.setLineDash([])
-    }
-  }, [
-    collapsed,
-    rowHeight,
-    margin.left,
-    hierarchy,
-    offsetY,
-    treeWidth,
-    showBranchLen,
-    noTree,
-    blockSize,
-    drawNodeBubbles,
-    drawTree,
-    labelsAlignRight,
-    treeAreaWidth,
-    structures,
-    highResScaleFactor,
-    treeMetadata,
-  ])
-
-  useEffect(() => {
-    const canvas = mouseoverRef.current
-    if (!canvas) {
-      return
-    }
-    const ctx = canvas.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    ctx.resetTransform()
-    ctx.clearRect(0, 0, treeWidth + 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, treeWidth])
-
-  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
-  }
-
-  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={(treeWidth + padding) * highResScaleFactor}
-        height={blockSize * highResScaleFactor}
-        style={{
-          width: treeWidth + padding,
-          height: blockSize,
-          top: scrollY + offsetY,
-          left: 0,
-          position: 'absolute',
-        }}
-        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={ref}
-      />
-      <canvas
-        style={{
-          width: treeWidth + padding,
-          height: blockSize,
-          top: scrollY + offsetY,
-          left: 0,
-          position: 'absolute',
-          pointerEvents: 'none',
-          zIndex: 100,
-        }}
-        width={treeWidth + padding}
-        height={blockSize}
-        ref={mouseoverRef}
-      />
-    </>
-  )
-})
-
-export default TreeCanvasBlock

package/src/components/dialogs/AnnotationDlg.tsx

@@ -1,144 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  IconButton,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-
-// locals
-import { MsaViewModel } from '../../model'
-
-const specialFromEntries = (val: string[][]) => {
-  const ret = {} as Record<string, string[]>
-  val.forEach(([key, val]) => {
-    if (!ret[key]) {
-      ret[key] = [] as string[]
-    }
-    ret[key].push(val)
-  })
-  return ret
-}
-
-const Row = observer(function ({
-  name,
-  value,
-  setValue,
-  setName,
-  onDelete,
-}: {
-  name: string
-  value: string
-  setValue: (arg: string) => void
-  setName: (arg: string) => void
-  onDelete: () => void
-}) {
-  return (
-    <div>
-      <IconButton onClick={onDelete} style={{ margin: 10 }}>
-        <DeleteIcon />
-      </IconButton>
-      <TextField
-        value={name}
-        onChange={event => setName(event.target.value)}
-        label="Key"
-      />
-      <TextField
-        value={value}
-        onChange={event => setValue(event.target.value)}
-        label="Value"
-      />
-    </div>
-  )
-})
-
-export default observer(
-  ({
-    onClose,
-    data,
-    model,
-  }: {
-    model: MsaViewModel
-    onClose: () => void
-    data: { left: number; right: number }
-  }) => {
-    const { blanks } = model
-    const { left: l, right: r } = data
-    const [rows, setRows] = useState([
-      ['Name', ''],
-      ['ID', ''],
-      ['Note', ''],
-    ])
-    return (
-      <Dialog
-        onClose={() => onClose()}
-        open
-        title="Create new region annotation"
-      >
-        <DialogContent>
-          <Typography>
-            Do you want to add an annotation to the MSA at {l}..{r}{' '}
-            {blanks.length
-              ? ` (gapped ${model.getPos(l)}..${model.getPos(r)}`
-              : ''}
-          </Typography>
-          {rows.map(([key, val], index) => (
-            <Row
-              key={index}
-              name={key}
-              value={val}
-              setValue={newValue => {
-                const newRows = [...rows]
-                newRows[index][1] = newValue
-                setRows(newRows)
-              }}
-              setName={newName => {
-                const newRows = [...rows]
-                newRows[index][0] = newName
-                setRows(newRows)
-              }}
-              onDelete={() => {
-                rows.splice(index, 1)
-                setRows([...rows])
-              }}
-            />
-          ))}
-          <Button
-            onClick={() => {
-              setRows([...rows, ['', '']])
-            }}
-          >
-            Add row
-          </Button>
-
-          <DialogActions>
-            <Button
-              onClick={() => {
-                model.addAnnotation(l, r, specialFromEntries(rows))
-                onClose()
-              }}
-              variant="contained"
-              color="primary"
-            >
-              Submit
-            </Button>
-            <Button
-              variant="contained"
-              color="secondary"
-              onClick={() => onClose()}
-            >
-              Cancel
-            </Button>
-          </DialogActions>
-        </DialogContent>
-      </Dialog>
-    )
-  },
-)

package/src/components/dialogs/SettingsDlg.tsx

@@ -1,154 +0,0 @@
-import React, { useState } 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,
-  MenuItem,
-  TextField,
-} from '@mui/material'
-
-import { MsaViewModel } from '../../model'
-import colorSchemes from '../../colorSchemes'
-
-const useStyles = makeStyles()(theme => ({
-  field: {
-    margin: theme.spacing(4),
-  },
-}))
-
-const SettingsDialog = observer(function ({
-  model,
-  onClose,
-}: {
-  model: MsaViewModel
-  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)
-
-  return (
-    <Dialog open onClose={() => onClose()} title="Settings">
-      <DialogContent>
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={model.showBranchLen}
-              onChange={() => model.toggleBranchLen()}
-            />
-          }
-          label="Show branch length"
-        />
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={model.bgColor}
-              onChange={() => model.toggleBgColor()}
-            />
-          }
-          label="Color background"
-        />
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={model.drawNodeBubbles}
-              onChange={() => model.toggleNodeBubbles()}
-            />
-          }
-          label="Draw node bubbles"
-        />
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={model.drawTree}
-              onChange={() => model.toggleDrawTree()}
-            />
-          }
-          label="Draw tree (if available)"
-        />
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={model.labelsAlignRight}
-              onChange={() => model.toggleLabelsAlignRight()}
-            />
-          }
-          label="Labels align right (note: labels may draw over tree, but can adjust tree width or tree area width in UI)"
-        />
-
-        <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)}
-          />
-        ) : null}
-
-        <br />
-
-        <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>
-        <DialogActions>
-          <Button
-            disabled={rowHeightError || colWidthError || treeWidthError}
-            onClick={() => {
-              model.setRowHeight(+rowHeight)
-              model.setColWidth(+colWidth)
-              if (!noTree) {
-                model.setTreeWidth(+treeWidth)
-              }
-              onClose()
-            }}
-            variant="contained"
-            color="primary"
-          >
-            Submit
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-})
-
-export default SettingsDialog