react-msaview 3.1.5 → 3.1.7

package/src/components/MSAPanel/renderMSAMouseover.ts

@@ -1,5 +1,8 @@
 import { MsaViewModel } from '../../model'
 
+const hoverColor = 'rgba(0,0,0,0.15)'
+const highlightColor = 'rgba(128,128,0,0.2)'
+
 export function renderMouseover({
   ctx,
   model,
@@ -18,19 +21,29 @@ export function renderMouseover({
     mouseRow,
     // @ts-expect-error
     mouseCol2,
+    mouseClickRow,
+    mouseClickCol,
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width, height)
   if (mouseCol !== undefined) {
-    ctx.fillStyle = 'rgba(0,0,0,0.15)'
+    ctx.fillStyle = hoverColor
     ctx.fillRect((mouseCol - 1) * colWidth + scrollX, 0, colWidth, height)
   }
   if (mouseRow !== undefined) {
-    ctx.fillStyle = 'rgba(0,0,0,0.15)'
+    ctx.fillStyle = hoverColor
     ctx.fillRect(0, mouseRow * rowHeight + scrollY, width, rowHeight)
   }
+  if (mouseClickCol !== undefined) {
+    ctx.fillStyle = highlightColor
+    ctx.fillRect((mouseClickCol - 1) * colWidth + scrollX, 0, colWidth, height)
+  }
+  if (mouseClickRow !== undefined) {
+    ctx.fillStyle = highlightColor
+    ctx.fillRect(0, mouseClickRow * rowHeight + scrollY, width, rowHeight)
+  }
   if (mouseCol2 !== undefined) {
-    ctx.fillStyle = 'rgba(255,255,0,0.2)'
+    ctx.fillStyle = highlightColor
     ctx.fillRect((mouseCol2 - 1) * colWidth + scrollX, 0, colWidth, height)
   }
 }

package/src/components/TreePanel/TreeNodeMenu.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react'
 // locals
 import { MsaViewModel } from '../../model'
 
+// lazies
 const TreeNodeInfoDialog = lazy(() => import('./dialogs/TreeNodeInfoDialog'))
 
 const TreeMenu = observer(function ({
@@ -16,104 +17,112 @@ const TreeMenu = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
-  const { structures } = model
+  const { selectedStructures, collapsed, collapsed2, structures } = model
   const nodeDetails = node ? model.getRowData(node.name) : undefined
 
   return (
-    <>
-      <Menu
-        anchorReference="anchorPosition"
-        anchorPosition={{
-          top: node.y,
-          left: node.x,
+    <Menu
+      anchorReference="anchorPosition"
+      anchorPosition={{
+        top: node.y,
+        left: node.x,
+      }}
+      transitionDuration={0}
+      keepMounted
+      open={Boolean(node)}
+      onClose={onClose}
+    >
+      <MenuItem dense disabled>
+        {node.name}
+      </MenuItem>
+
+      <MenuItem
+        dense
+        onClick={() => {
+          model.queueDialog(onClose => [
+            TreeNodeInfoDialog,
+            {
+              info: model.getRowData(node.name),
+              model,
+              nodeName: node.name,
+              onClose,
+            },
+          ])
+          onClose()
         }}
-        transitionDuration={0}
-        keepMounted
-        open={Boolean(node)}
-        onClose={onClose}
       >
-        <MenuItem dense disabled>
-          {node.name}
-        </MenuItem>
-
-        <MenuItem
-          dense
-          onClick={() => {
-            model.queueDialog(onClose => [
-              TreeNodeInfoDialog,
-              {
-                info: model.getRowData(node.name),
-                model,
-                nodeName: node.name,
-                onClose,
-              },
-            ])
-            onClose()
-          }}
-        >
-          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) ? (
-            <MenuItem
-              key={JSON.stringify(entry)}
-              dense
-              onClick={() => {
-                model.addStructureToSelection({
-                  structure: entry,
-                  id: node.name,
-                })
-                onClose()
-              }}
-            >
-              Add PDB to selection ({entry.pdb})
-            </MenuItem>
-          ) : (
-            <MenuItem
-              key={JSON.stringify(entry)}
-              dense
-              onClick={() => {
-                model.removeStructureFromSelection({
-                  structure: entry,
-                  id: node.name,
-                })
-                onClose()
-              }}
-            >
-              Remove PDB from selection ({entry.pdb})
-            </MenuItem>
-          )
-        })}
+        More info...
+      </MenuItem>
+      <MenuItem
+        dense
+        onClick={() => {
+          if (collapsed.includes(node.id)) {
+            model.toggleCollapsed(node.id)
+          } else {
+            if (node.id.endsWith('-leafnode')) {
+              model.toggleCollapsed2(`${node.id}`)
+            } else {
+              model.toggleCollapsed2(`${node.id}-leafnode`)
+            }
+          }
+          onClose()
+        }}
+      >
+        {collapsed.includes(node.id) || collapsed2.includes(node.id)
+          ? 'Show node'
+          : 'Hide node'}
+      </MenuItem>
 
-        {// @ts-expect-error
-        nodeDetails?.data.accession?.map(accession => (
+      {structures[node.name]?.map(entry =>
+        !selectedStructures.some(n => n.id === node.name) ? (
+          <MenuItem
+            key={JSON.stringify(entry)}
+            dense
+            onClick={() => {
+              model.addStructureToSelection({
+                structure: entry,
+                id: node.name,
+              })
+              onClose()
+            }}
+          >
+            Add PDB to selection ({entry.pdb})
+          </MenuItem>
+        ) : (
           <MenuItem
+            key={JSON.stringify(entry)}
             dense
-            key={accession}
             onClick={() => {
-              model.addUniprotTrack({
-                // @ts-expect-error
-                name: nodeDetails?.data.name,
-                accession,
+              model.removeStructureFromSelection({
+                structure: entry,
+                id: node.name,
               })
               onClose()
             }}
           >
-            Open UniProt track ({accession})
+            Remove PDB from selection ({entry.pdb})
           </MenuItem>
-        ))}
-      </Menu>
-    </>
+        ),
+      )}
+
+      {// @ts-expect-error
+      nodeDetails?.data.accession?.map(accession => (
+        <MenuItem
+          dense
+          key={accession}
+          onClick={() => {
+            model.addUniprotTrack({
+              // @ts-expect-error
+              name: nodeDetails?.data.name,
+              accession,
+            })
+            onClose()
+          }}
+        >
+          Open UniProt track ({accession})
+        </MenuItem>
+      ))}
+    </Menu>
   )
 })
 

package/src/components/TreePanel/renderTreeCanvas.ts

@@ -90,6 +90,7 @@ export function renderNodeBubbles({
     } = node
     const { branchset, id = '', name = '' } = data
     if (
+      !id.endsWith('-leafnode') &&
       branchset.length &&
       y > offsetY - extendBounds &&
       y < offsetY + by + extendBounds
@@ -195,8 +196,8 @@ export function renderTreeLabels({
         }
         ctx.fillText(displayName, offset, yp)
         clickMap?.insert({
-          minX: treeAreaWidth - width + ml,
-          maxX: treeAreaWidth + ml,
+          minX: treeAreaWidth - width,
+          maxX: treeAreaWidth,
           minY: yp - height,
           maxY: yp,
           name,

package/src/components/dialogs/SettingsDialog.tsx

@@ -35,140 +35,152 @@ function FormControlLabel2(rest: FormControlLabelProps) {
   )
 }
 
+function Checkbox2({
+  checked,
+  label,
+  onChange,
+}: {
+  checked: boolean
+  label: string
+  onChange: () => void
+}) {
+  return (
+    <FormControlLabel2
+      control={<Checkbox checked={checked} onChange={onChange} />}
+      label={label}
+    />
+  )
+}
+
 const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
+  return (
+    <>
+      <TreeSettings model={model} />
+      <MSASettings model={model} />
+    </>
+  )
+})
+
+const TreeSettings = observer(function TreeSettings({
+  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?"
-        />
+    <div>
+      <h1>Tree options</h1>
+      <Checkbox2
+        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?"
-        />
+      <Checkbox2
+        checked={drawNodeBubbles}
+        onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
+        label="Draw clickable bubbles on tree branches?"
+      />
+      <Checkbox2
+        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)}
+      <Checkbox2
+        checked={labelsAlignRight}
+        onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
+        label="Tree labels align right?"
+      />
+      {!noTree ? (
+        <div>
+          <Checkbox2
+            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>
+  )
+})
 
-        <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>
+const MSASettings = observer(function MSASettings({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { classes } = useStyles()
+  const { bgColor, colWidth, colorSchemeName, rowHeight } = model
+
+  return (
+    <div>
+      <h1>MSA options</h1>
+
+      <Checkbox2
+        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>
   )
 })
 

package/src/measureTextCanvas.ts

@@ -1,6 +1,6 @@
 let canvasHandle: HTMLCanvasElement | undefined
 
-export default function measureTextCanvas(text: string, fontSize: number) {
+export function measureTextCanvas(text: string, fontSize: number) {
   if (!canvasHandle) {
     canvasHandle = document.createElement('canvas')
   }