Pause resume in viewer

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

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];
 }

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>
   );