viewer panels update (websocket and hide images) (#620)

websocket update

nerfstudio/viewer/app/src/modules/LandingModal/LandingModal.jsx

@@ -57,7 +57,7 @@ export default function LandingModel(props: LandingModalProps) {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
-  const text_intro = `To use our viewer, you need to connect to the WebSocket server where your training job is running.`;
+  const text_intro = `To use our viewer, you need to connect to the WebSocket server where your training job is running. Enter your WebSocket Port below and click the link to connect to your training job.`;
 
   const websocket_port = useSelector(
     (state) => state.websocketState.websocket_port,
@@ -116,9 +116,6 @@ export default function LandingModel(props: LandingModalProps) {
             <div className="LandingModel-content">
               <h2>Getting Started</h2>
               <p>{text_intro}</p>
-              <p>
-                You can enter your WebSocket Port in the Status Panel or here:
-              </p>
               <WebSocketUrlField />
               <h3>Remote Server</h3>
               <p>

nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx

@@ -3,11 +3,9 @@ import * as React from 'react';
 import Button from '@mui/material/Button';
 import { ButtonGroup } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
-import { useEffect } from 'react';
 import PauseIcon from '@mui/icons-material/Pause';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import ViewInArIcon from '@mui/icons-material/ViewInAr';
-import WebSocketUrlField from '../../WebSocketUrlField';
 
 import { WebSocketContext } from '../../WebSocket/WebSocket';
 
@@ -33,23 +31,17 @@ export default function StatusPanel(props: StatusPanelProps) {
   const vis_train_ratio = useSelector(
     (state) => state.renderingState.vis_train_ratio,
   );
-
-  // simple toggle button
-  const [value, setValue] = React.useState(1);
-  const handleChange = () => {
-    setValue(!value);
-  };
-
-  useEffect(() => {
-    const labels = document.getElementsByClassName('label');
-    for (let i = 0; i < labels.length; i += 1) {
-      if (!value) {
-        labels[i].style.visibility = 'hidden';
-      } else {
-        labels[i].style.visibility = 'visible';
-      }
-    }
-  }, [value]);
+  
+  // logic for toggling visibility of the entire scene and just the training images
+  const [is_scene_visible, set_is_scene_visible] = React.useState(1);
+  const [is_images_visible, set_is_images_visible] = React.useState(1);
+  const scene_button = is_scene_visible ? 'Hide Scene' : 'Show Scene';
+  const cameras_button = is_images_visible ? 'Hide Images' : 'Show Images';
+  sceneTree.object.visible = is_scene_visible;
+  if (sceneTree.find_no_create(['Training Cameras']) !== null) {
+    sceneTree.find_no_create(['Training Cameras']).object.visible =
+      is_images_visible;
+  }
 
   const handlePlayChange = () => {
     dispatch({
@@ -68,7 +60,6 @@ export default function StatusPanel(props: StatusPanelProps) {
     const message = msgpack.encode(data);
     websocket.send(message);
   };
-  const scene_button = value ? 'Hide Scene' : 'Show Scene';
   const is_training_text = isTraining ? 'Pause Training' : 'Resume Training';
   const training_icon = isTraining ? <PauseIcon /> : <PlayArrowIcon />;
 
@@ -80,7 +71,6 @@ export default function StatusPanel(props: StatusPanelProps) {
     : 'Render Disconnected';
   const websocket_connected_color = isWebsocketConnected ? 'success' : 'error';
   const webrtc_connected_color = isWebrtcConnected ? 'success' : 'error';
-  sceneTree.object.visible = value;
 
   return (
     <div className="StatusPanel">
@@ -99,13 +89,25 @@ export default function StatusPanel(props: StatusPanelProps) {
       <Button
         className="StatusPanel-hide-scene-button"
         variant="outlined"
-        onClick={handleChange}
+        onClick={() => {
+          set_is_scene_visible(!is_scene_visible);
+        }}
         style={{ textTransform: 'none' }}
         startIcon={<ViewInArIcon />}
       >
         {scene_button}
       </Button>
-      <WebSocketUrlField />
+      <Button
+        className="StatusPanel-hide-scene-button"
+        variant="outlined"
+        onClick={() => {
+          set_is_images_visible(!is_images_visible);
+        }}
+        style={{ textTransform: 'none' }}
+        startIcon={<ViewInArIcon />}
+      >
+        {cameras_button}
+      </Button>
       <div className="StatusPanel-metrics">
         <div>
           <b>Resolution:</b> {eval_res}

nerfstudio/viewer/app/src/modules/WebSocket/WebSocket.jsx

@@ -15,7 +15,7 @@ export default function WebSocketContextFunction({ children }) {
   let ws = null;
   let socket = null;
 
-  // this code will rerender anytime the webosocket changes now
+  // this code will rerender anytime the websocket changes now
   const websocket_port = useSelector(
     (state) => state.websocketState.websocket_port,
   );

nerfstudio/viewer/app/src/modules/WebSocketUrlField.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { TextField } from '@mui/material';
+import { TextField, Link } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
 
 export default function WebSocketUrlField() {
@@ -18,13 +18,18 @@ export default function WebSocketUrlField() {
   };
 
   return (
-    <TextField
-      className="WebSocketUrlField"
-      label="WebSocket Port"
-      variant="outlined"
-      value={websocket_port}
-      onChange={websocket_port_onchange}
-      size="small"
-    />
+    <div>
+      <TextField
+        className="WebSocketUrlField"
+        label="WebSocket Port"
+        variant="outlined"
+        value={websocket_port}
+        onChange={websocket_port_onchange}
+        size="small"
+      />
+      <Link href={`/?websocket_port=${  websocket_port}`}>
+        viewer.nerf.studio?websocket_port={websocket_port}
+      </Link>
+    </div>
   );
 }

nerfstudio/viewer/app/src/reducer.js

@@ -3,7 +3,7 @@ import { split_path } from './utils';
 const initialState = {
   // the websocket connection state
   websocketState: {
-    websocket_port: 7007,
+    websocket_port: 1111,
     isConnected: false,
   },
   // the webrtc connection state

tests/viewer/test_viewer.py

@@ -1,23 +0,0 @@
-"""
-Test communications with the viewer.
-"""
-
-import time
-
-from nerfstudio.viewer.server.subprocess import run_viewer_bridge_server_as_subprocess
-
-
-def test_run_subprocess():
-    """Test running the viewer bridge server as a subprocess."""
-    zmq_port = 6000 + 10  # don't use the default ports to avoid conflicting with current training jobs
-    websocket_port = 7007 + 10
-    print("Starting the viewer bridge server as a subprocess.")
-    run_viewer_bridge_server_as_subprocess(websocket_port, zmq_port=zmq_port, log_filename=None)
-    print("Started the viewer bridge server as a subprocess.")
-    # do something will the viewer bridge server runs
-    time.sleep(1)
-
-
-if __name__ == "__main__":
-    test_run_subprocess()
-    print("Tests passed.")