react-msaview 3.0.0 → 3.0.1

package/src/components/TreePanel/TreeCanvasBlock.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
+import { useTheme } from '@mui/material'
 import RBush from 'rbush'
 
 // locals
 import { MsaViewModel } from '../../model'
-import TreeMenu from './TreeMenu'
+import TreeNodeMenu from './TreeNodeMenu'
 import TreeBranchMenu from './TreeBranchMenu'
 import { padding, renderTreeCanvas } from './renderTreeCanvas'
 
@@ -33,6 +34,7 @@ const TreeCanvasBlock = observer(function ({
   model: MsaViewModel
   offsetY: number
 }) {
+  const theme = useTheme()
   const ref = useRef<HTMLCanvasElement>()
   const clickMap = useRef(new RBush<ClickEntry>())
   const mouseoverRef = useRef<HTMLCanvasElement>(null)
@@ -68,9 +70,10 @@ const TreeCanvasBlock = observer(function ({
         model,
         offsetY,
         clickMap: clickMap.current,
+        theme,
       })
     })
-  }, [model, offsetY])
+  }, [model, offsetY, theme])
 
   useEffect(() => {
     const ctx = mouseoverRef.current?.getContext('2d')
@@ -138,7 +141,7 @@ const TreeCanvasBlock = observer(function ({
       ) : null}
 
       {toggleNodeMenu?.id ? (
-        <TreeMenu
+        <TreeNodeMenu
           node={toggleNodeMenu}
           model={model}
           onClose={() => setToggleNodeMenu(undefined)}
@@ -155,6 +158,7 @@ const TreeCanvasBlock = observer(function ({
           }
 
           const ret = hoverNameClickMap(event) || hoverBranchClickMap(event)
+          console.log({ ret })
           ref.current.style.cursor = ret ? 'pointer' : 'default'
           setHoverElt(hoverNameClickMap(event))
         }}
@@ -171,6 +175,7 @@ const TreeCanvasBlock = observer(function ({
             setToggleNodeMenu({ ...data2, x, y })
           }
         }}
+        onMouseLeave={() => setHoverElt(undefined)}
         ref={vref}
       />
       <canvas

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

@@ -5,14 +5,14 @@ import { observer } from 'mobx-react'
 // locals
 import { MsaViewModel } from '../../model'
 
-const TreeNodeInfoDlg = lazy(() => import('./dialogs/TreeNodeInfoDlg'))
+const TreeNodeInfoDialog = lazy(() => import('./dialogs/TreeNodeInfoDialog'))
 
 const TreeMenu = observer(function ({
   node,
   onClose,
   model,
 }: {
-  node: { x: number; y: number; name: string }
+  node: { x: number; y: number; name: string; id: string }
   model: MsaViewModel
   onClose: () => void
 }) {
@@ -40,7 +40,7 @@ const TreeMenu = observer(function ({
           dense
           onClick={() => {
             model.queueDialog(onClose => [
-              TreeNodeInfoDlg,
+              TreeNodeInfoDialog,
               {
                 info: model.getRowData(node.name),
                 model,
@@ -53,6 +53,15 @@ const TreeMenu = observer(function ({
         >
           More info...
         </MenuItem>
+        <MenuItem
+          dense
+          onClick={() => {
+            model.hideNode(node.id)
+            onClose()
+          }}
+        >
+          Hide node
+        </MenuItem>
 
         {structures[node.name]?.map(entry => {
           return !model.selectedStructures.some(n => n.id === node.name) ? (

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

@@ -25,7 +25,7 @@ export default observer(function ({
     <Dialog onClose={() => onClose()} open title="Tree node info">
       <DialogContent>
         <BaseCard title="Attributes">
-          <Attributes attributes={info} />
+          <Attributes attributes={{ nodeName, ...info }} />
         </BaseCard>
         {metadata ? (
           <BaseCard title="Extra metadata">

package/src/components/TreePanel/renderTreeCanvas.ts

@@ -2,6 +2,7 @@ import RBush from 'rbush'
 
 // locals
 import { MsaViewModel } from '../../model'
+import { Theme } from '@mui/material'
 
 export const padding = 600
 const extendBounds = 5
@@ -22,12 +23,15 @@ 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
@@ -60,6 +64,7 @@ export function renderNodeBubbles({
   clickMap: RBush<ClickEntry>
   offsetY: number
   model: MsaViewModel
+  theme: Theme
 }) {
   const { hierarchy, showBranchLen, collapsed, blockSize } = model
   for (const node of hierarchy.descendants()) {
@@ -98,6 +103,7 @@ export function renderNodeBubbles({
 }
 
 export function renderTreeLabels({
+  theme,
   model,
   offsetY,
   ctx,
@@ -107,6 +113,7 @@ export function renderTreeLabels({
   offsetY: number
   ctx: CanvasRenderingContext2D
   clickMap: RBush<ClickEntry>
+  theme: Theme
 }) {
   const {
     rowHeight,
@@ -149,7 +156,7 @@ export function renderTreeLabels({
       const height = ctx.measureText('M').width // use an 'em' for height
 
       const hasStructure = structures[name]
-      ctx.fillStyle = hasStructure ? 'blue' : 'black'
+      ctx.fillStyle = hasStructure ? 'blue' : theme.palette.text.primary
 
       if (!drawTree && !labelsAlignRight) {
         ctx.fillText(displayName, 0, yp)
@@ -200,11 +207,13 @@ export function renderTreeCanvas({
   clickMap,
   ctx,
   offsetY,
+  theme,
 }: {
   model: MsaViewModel
   offsetY: number
   ctx: CanvasRenderingContext2D
   clickMap: RBush<ClickEntry>
+  theme: Theme
 }) {
   clickMap.clear()
   const {
@@ -232,14 +241,14 @@ export function renderTreeCanvas({
   ctx.font = font.replace(/\d+px/, `${fontSize}px`)
 
   if (!noTree && drawTree) {
-    renderTree({ ctx, offsetY, model })
+    renderTree({ ctx, offsetY, model, theme })
 
     if (drawNodeBubbles) {
-      renderNodeBubbles({ ctx, offsetY, clickMap, model })
+      renderNodeBubbles({ ctx, offsetY, clickMap, model, theme })
     }
   }
 
   if (rowHeight >= 5) {
-    renderTreeLabels({ ctx, offsetY, model, clickMap })
+    renderTreeLabels({ ctx, offsetY, model, clickMap, theme })
   }
 }

package/src/components/dialogs/SettingsDialog.tsx

@@ -8,6 +8,7 @@ import {
   DialogActions,
   DialogContent,
   FormControlLabel,
+  FormControlLabelProps,
   MenuItem,
   Slider,
   TextField,
@@ -21,15 +22,20 @@ const useStyles = makeStyles()(theme => ({
   field: {
     margin: theme.spacing(4),
   },
+  flex: {
+    display: 'flex',
+  },
 }))
 
-const SettingsDialog = observer(function ({
-  model,
-  onClose,
-}: {
-  model: MsaViewModel
-  onClose: () => void
-}) {
+function FormControlLabel2(rest: FormControlLabelProps) {
+  return (
+    <div>
+      <FormControlLabel {...rest} />
+    </div>
+  )
+}
+
+const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
   const { classes } = useStyles()
   const {
     bgColor,
@@ -44,59 +50,52 @@ const SettingsDialog = observer(function ({
     treeWidthMatchesArea,
     treeWidth,
   } = model
-
   return (
-    <Dialog open onClose={() => onClose()} title="Settings">
-      <DialogContent>
-        <FormControlLabel
+    <>
+      <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"
+          label="Show branch length?"
         />
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={bgColor}
-              onChange={() => model.setBgColor(!bgColor)}
-            />
-          }
-          label="Color background"
-        />
-        <FormControlLabel
+
+        <FormControlLabel2
           control={
             <Checkbox
               checked={drawNodeBubbles}
               onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
             />
           }
-          label="Draw node bubbles"
+          label="Draw clickable bubbles on tree branches?"
         />
-        <FormControlLabel
+        <FormControlLabel2
           control={
             <Checkbox
               checked={drawTree}
               onChange={() => model.setDrawTree(!drawTree)}
             />
           }
-          label="Draw tree (if available)"
+          label="Show tree?"
         />
-        <FormControlLabel
+
+        <FormControlLabel2
           control={
             <Checkbox
               checked={labelsAlignRight}
               onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
             />
           }
-          label="Labels align right"
+          label="Tree labels align right?"
         />
-
         {!noTree ? (
           <div>
-            <FormControlLabel
+            <FormControlLabel2
               control={
                 <Checkbox
                   checked={treeWidthMatchesArea}
@@ -108,7 +107,7 @@ const SettingsDialog = observer(function ({
               label="Make tree width fit to tree area?"
             />
             {!treeWidthMatchesArea ? (
-              <div style={{ display: 'flex' }}>
+              <div className={classes.flex}>
                 <Typography>Tree width ({treeWidth}px)</Typography>
                 <Slider
                   className={classes.field}
@@ -121,8 +120,21 @@ const SettingsDialog = observer(function ({
             ) : 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 style={{ display: 'flex' }}>
+        <div className={classes.flex}>
           <Typography>Column width ({colWidth}px)</Typography>
           <Slider
             className={classes.field}
@@ -132,7 +144,7 @@ const SettingsDialog = observer(function ({
             onChange={(_, val) => model.setColWidth(val as number)}
           />
         </div>
-        <div style={{ display: 'flex' }}>
+        <div className={classes.flex}>
           <Typography>Row height ({rowHeight}px)</Typography>
           <Slider
             className={classes.field}
@@ -155,19 +167,24 @@ const SettingsDialog = observer(function ({
             </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={() => {
-              model.setRowHeight(+rowHeight)
-              model.setColWidth(+colWidth)
-              if (!noTree) {
-                model.setTreeWidth(+treeWidth)
-              }
-              onClose()
-            }}
-            variant="contained"
-            color="primary"
-          >
+          <Button onClick={() => onClose()} variant="contained" color="primary">
             Submit
           </Button>
         </DialogActions>