From 19bc554a0c2354546ac68b94b7cdfb83c5a2de3a Mon Sep 17 00:00:00 2001
From: Matt Tancik <tancik@berkeley.edu>
Date: Fri, 22 Jul 2022 17:13:33 -0700
Subject: [PATCH] Pause resume in viewer

---
 pyrad/viewer/app/src/Viewer.jsx      |  4 ++--
 pyrad/viewer/app/src/controlPanel.js | 20 ++++++++++++++------
 pyrad/viewer/app/src/index.js        |  4 +++-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/pyrad/viewer/app/src/Viewer.jsx b/pyrad/viewer/app/src/Viewer.jsx
index d08f3894d..0e25cfbee 100644
--- a/pyrad/viewer/app/src/Viewer.jsx
+++ b/pyrad/viewer/app/src/Viewer.jsx
@@ -422,8 +422,8 @@ export class ViewerState extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     // Pause training
-    if (prevProps.pause_training !== this.props.pause_training) {
-      this.send_training_state_over_websocket(this.props.pause_training);
+    if (prevProps.paused !== this.props.paused) {
+      this.send_training_state_over_websocket(this.props.paused);
     }
 
     // Choose render type
diff --git a/pyrad/viewer/app/src/controlPanel.js b/pyrad/viewer/app/src/controlPanel.js
index 9b3a916f2..b6f33a214 100644
--- a/pyrad/viewer/app/src/controlPanel.js
+++ b/pyrad/viewer/app/src/controlPanel.js
@@ -13,13 +13,21 @@ export function PanelConfig() {
 
 export function RenderControls() {
   const [outputOptions, setOutputOptions] = React.useState([]);
+  const [paused, setPaused] = React.useState(false);
+
+  const toggle = () => {
+    setPaused((current) => !current);
+  };
+
   const [controls, setControls] = useControls(
     "Render Options",
     () => ({
-      pause_training: {
-        label: "Pause Training?",
-        value: false,
-      },
+      "Resume Training": button(toggle, {
+        disabled: !paused,
+      }),
+      "Pause Training": button(toggle, {
+        disabled: paused,
+      }),
       output_options: {
         label: "Output Render",
         options: outputOptions,
@@ -53,8 +61,8 @@ export function RenderControls() {
         "1024px": () => setControls({ max_resolution: 1024 }),
       }),
     }),
-    [outputOptions]
+    [outputOptions, paused]
   );
 
-  return [controls, setControls, setOutputOptions];
+  return [controls, paused, setControls, setOutputOptions];
 }
diff --git a/pyrad/viewer/app/src/index.js b/pyrad/viewer/app/src/index.js
index 54f855dfa..760af9fc2 100644
--- a/pyrad/viewer/app/src/index.js
+++ b/pyrad/viewer/app/src/index.js
@@ -6,16 +6,18 @@ import { ViewerState } from "./Viewer";
 import { PanelConfig, RenderControls } from "./controlPanel";
 
 function App() {
-  let [controls, setControls, setOutputOptions] = RenderControls();
+  let [controls, paused, setControls, setOutputOptions] = RenderControls();
 
   console.log(controls);
   return (
     <div>
       <ViewerState
         {...controls}
+        paused={paused}
         setControls={setControls}
         setOutputOptions={setOutputOptions}
       />
+      <button id="demo">Button 1</button>
       <PanelConfig />
     </div>
   );