From cf025a295dbd0cc11ef90b74e306fb05d63536e4 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Mon, 8 Jan 2024 09:20:28 -0500
Subject: [PATCH] Update to sliders

---
 .../components/TreePanel/TreeCanvasBlock.tsx  | 32 +++---
 lib/src/components/dialogs/SettingsDialog.tsx | 99 ++++++++++---------
 lib/src/model.ts                              | 20 ++--
 3 files changed, 80 insertions(+), 71 deletions(-)

diff --git a/lib/src/components/TreePanel/TreeCanvasBlock.tsx b/lib/src/components/TreePanel/TreeCanvasBlock.tsx
index d0c3800a..277f40f5 100644
--- a/lib/src/components/TreePanel/TreeCanvasBlock.tsx
+++ b/lib/src/components/TreePanel/TreeCanvasBlock.tsx
@@ -45,6 +45,8 @@ const TreeCanvasBlock = observer(function ({
 
   const width = treeAreaWidth + padding
   const height = blockSize
+  const w2 = width * highResScaleFactor
+  const h2 = height * highResScaleFactor
 
   const vref = useCallback(
     (arg: HTMLCanvasElement) => {
@@ -118,7 +120,13 @@ const TreeCanvasBlock = observer(function ({
       ? { ...entry, x: event.clientX, y: event.clientY }
       : undefined
   }
-
+  const style = {
+    width,
+    height,
+    top: scrollY + offsetY,
+    left: 0,
+    position: 'absolute',
+  } as const
   return (
     <>
       {branchMenu?.id ? (
@@ -138,15 +146,9 @@ const TreeCanvasBlock = observer(function ({
       ) : null}
 
       <canvas
-        width={(treeAreaWidth + padding) * highResScaleFactor}
-        height={blockSize * highResScaleFactor}
-        style={{
-          width: treeAreaWidth + padding,
-          height: blockSize,
-          top: scrollY + offsetY,
-          left: 0,
-          position: 'absolute',
-        }}
+        width={w2}
+        height={h2}
+        style={style}
         onMouseMove={event => {
           if (!ref.current) {
             return
@@ -173,16 +175,12 @@ const TreeCanvasBlock = observer(function ({
       />
       <canvas
         style={{
-          width: treeAreaWidth + padding,
-          height: blockSize,
-          top: scrollY + offsetY,
-          left: 0,
-          position: 'absolute',
+          ...style,
           pointerEvents: 'none',
           zIndex: 100,
         }}
-        width={treeAreaWidth + padding}
-        height={blockSize}
+        width={width}
+        height={height}
         ref={mouseoverRef}
       />
     </>
diff --git a/lib/src/components/dialogs/SettingsDialog.tsx b/lib/src/components/dialogs/SettingsDialog.tsx
index e8efae87..4f34909f 100644
--- a/lib/src/components/dialogs/SettingsDialog.tsx
+++ b/lib/src/components/dialogs/SettingsDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 import { Dialog } from '@jbrowse/core/ui'
@@ -9,7 +9,9 @@ import {
   DialogContent,
   FormControlLabel,
   MenuItem,
+  Slider,
   TextField,
+  Typography,
 } from '@mui/material'
 
 import { MsaViewModel } from '../../model'
@@ -29,17 +31,18 @@ const SettingsDialog = observer(function ({
   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)
+  const {
+    colorSchemeName,
+    drawTree,
+    labelsAlignRight,
+    drawNodeBubbles,
+    bgColor,
+    treeWidth,
+    showBranchLen,
+    noTree,
+    rowHeight,
+    colWidth,
+  } = model
 
   return (
     <Dialog open onClose={() => onClose()} title="Settings">
@@ -47,8 +50,8 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.showBranchLen}
-              onChange={() => model.toggleBranchLen()}
+              checked={showBranchLen}
+              onChange={() => model.setShowBranchLen(!showBranchLen)}
             />
           }
           label="Show branch length"
@@ -56,8 +59,8 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.bgColor}
-              onChange={() => model.toggleBgColor()}
+              checked={bgColor}
+              onChange={() => model.setBgColor(!bgColor)}
             />
           }
           label="Color background"
@@ -65,8 +68,8 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.drawNodeBubbles}
-              onChange={() => model.toggleNodeBubbles()}
+              checked={drawNodeBubbles}
+              onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
             />
           }
           label="Draw node bubbles"
@@ -74,8 +77,8 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.drawTree}
-              onChange={() => model.toggleDrawTree()}
+              checked={drawTree}
+              onChange={() => model.setDrawTree(!drawTree)}
             />
           }
           label="Draw tree (if available)"
@@ -83,36 +86,45 @@ const SettingsDialog = observer(function ({
         <FormControlLabel
           control={
             <Checkbox
-              checked={model.labelsAlignRight}
-              onChange={() => model.toggleLabelsAlignRight()}
+              checked={labelsAlignRight}
+              onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
             />
           }
           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
+        <div>
+          <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>
+          <Typography>Row height ({rowHeight}px)</Typography>
+          <Slider
             className={classes.field}
-            label="Tree width (px)"
-            value={treeWidth}
-            error={treeWidthError}
-            onChange={event => setTreeWidth(event.target.value)}
+            min={1}
+            max={50}
+            value={rowHeight}
+            onChange={(_, val) => model.setRowHeight(val as number)}
           />
+        </div>
+
+        {!noTree ? (
+          <div>
+            <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}
 
         <br />
@@ -131,7 +143,6 @@ const SettingsDialog = observer(function ({
         </TextField>
         <DialogActions>
           <Button
-            disabled={rowHeightError || colWidthError || treeWidthError}
             onClick={() => {
               model.setRowHeight(+rowHeight)
               model.setColWidth(+colWidth)
diff --git a/lib/src/model.ts b/lib/src/model.ts
index a6667244..dd9ade40 100644
--- a/lib/src/model.ts
+++ b/lib/src/model.ts
@@ -371,14 +371,14 @@ const model = types
     /**
      * #action
      */
-    toggleLabelsAlignRight() {
-      self.labelsAlignRight = !self.labelsAlignRight
+    setLabelsAlignRight(arg: boolean) {
+      self.labelsAlignRight = arg
     },
     /**
      * #action
      */
-    toggleDrawTree() {
-      self.drawTree = !self.drawTree
+    setDrawTree(arg: boolean) {
+      self.drawTree = arg
     },
     /**
      * #action
@@ -399,20 +399,20 @@ const model = types
     /**
      * #action
      */
-    toggleBranchLen() {
-      self.showBranchLen = !self.showBranchLen
+    setShowBranchLen(arg: boolean) {
+      self.showBranchLen = arg
     },
     /**
      * #action
      */
-    toggleBgColor() {
-      self.bgColor = !self.bgColor
+    setBgColor(arg: boolean) {
+      self.bgColor = arg
     },
     /**
      * #action
      */
-    toggleNodeBubbles() {
-      self.drawNodeBubbles = !self.drawNodeBubbles
+    setDrawNodeBubbles(arg: boolean) {
+      self.drawNodeBubbles = arg
     },
     /**
      * #action