Update Render View logic (#1134)

nerfstudio/viewer/app/src/index.scss

@@ -137,7 +137,10 @@ $sidebar-width: 100% !default;
 }
 
 .StatusPanel .StatusPanel-hide-scene-button {
-  margin: 12px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-left: 6px;
+  margin-right: 6px;
 }
 
 .StatusPanel .WebSocketUrlField {

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

@@ -15,6 +15,7 @@ import {
   WidgetsRounded,
   ImportExportRounded,
 } from '@mui/icons-material/';
+import { useSelector } from 'react-redux';
 import StatusPanel from './StatusPanel';
 import LevaTheme from '../../themes/leva_theme.json';
 import CameraPanel from './CameraPanel';
@@ -84,6 +85,15 @@ export function BasicTabs(props: BasicTabsProps) {
     setValue(newValue);
     setShowExportBox(newValue === 3);
   };
+  const camera_choice = useSelector(
+    (state) => state.renderingState.camera_choice,
+  );
+
+  React.useEffect(() => {
+    if (camera_choice === 'Render Camera') {
+      setValue(1);
+    }
+  }, [camera_choice]);
 
   return (
     <div>
@@ -99,10 +109,16 @@ export function BasicTabs(props: BasicTabsProps) {
           >
             <Tab icon={<TuneRounded />} label="Controls" {...a11yProps(0)} />
             <Tab icon={<CameraAltRounded />} label="Render" {...a11yProps(1)} />
-            <Tab icon={<WidgetsRounded />} label="Scene" {...a11yProps(2)} />
+            <Tab
+              icon={<WidgetsRounded />}
+              label="Scene"
+              disabled={camera_choice === 'Render Camera'}
+              {...a11yProps(2)}
+            />
             <Tab
               icon={<ImportExportRounded />}
               label="Export"
+              disabled={camera_choice === 'Render Camera'}
               {...a11yProps(3)}
             />
           </Tabs>

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

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import PauseIcon from '@mui/icons-material/Pause';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import ViewInArIcon from '@mui/icons-material/ViewInAr';
+import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';
 
 import { WebSocketContext } from '../../WebSocket/WebSocket';
 
@@ -31,28 +32,30 @@ export default function StatusPanel(props: StatusPanelProps) {
   const vis_train_ratio = useSelector(
     (state) => state.renderingState.vis_train_ratio,
   );
+  const camera_choice = useSelector(
+    (state) => state.renderingState.camera_choice,
+  );
 
   // 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 [is_scene_visible, set_is_scene_visible] = React.useState(true);
+  const [is_images_visible, set_is_images_visible] = React.useState(true);
   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;
+  sceneTree.object.visible =
+    is_scene_visible && camera_choice === 'Main Camera';
   if (sceneTree.find_no_create(['Training Cameras']) !== null) {
     sceneTree.find_no_create(['Training Cameras']).object.visible =
       is_images_visible;
   }
 
   React.useEffect(() => {
-    sceneTree.object.traverse(
-      (obj) => {
-        if (obj.name === 'CAMERA_LABEL') {
-          // eslint-disable-next-line no-param-reassign
-          obj.visible = is_scene_visible;
-        }
+    sceneTree.object.traverse((obj) => {
+      if (obj.name === 'CAMERA_LABEL') {
+        // eslint-disable-next-line no-param-reassign
+        obj.visible = is_scene_visible && camera_choice === 'Main Camera';
       }
-    );
-  }, [is_scene_visible]);
+    });
+  }, [camera_choice, is_scene_visible]);
 
   const handlePlayChange = () => {
     dispatch({
@@ -105,6 +108,7 @@ export default function StatusPanel(props: StatusPanelProps) {
         }}
         style={{ textTransform: 'none' }}
         startIcon={<ViewInArIcon />}
+        disabled={camera_choice === 'Render Camera'}
       >
         {scene_button}
       </Button>
@@ -115,7 +119,8 @@ export default function StatusPanel(props: StatusPanelProps) {
           set_is_images_visible(!is_images_visible);
         }}
         style={{ textTransform: 'none' }}
-        startIcon={<ViewInArIcon />}
+        startIcon={<ImageOutlinedIcon />}
+        disabled={camera_choice === 'Render Camera'}
       >
         {cameras_button}
       </Button>

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

@@ -9,6 +9,8 @@ import OpenWithIcon from '@mui/icons-material/OpenWith';
 import PublicOffSharpIcon from '@mui/icons-material/PublicOffSharp';
 import PublicSharpIcon from '@mui/icons-material/PublicSharp';
 import SyncOutlinedIcon from '@mui/icons-material/SyncOutlined';
+import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
+import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBackOutlined';
 import WebRtcWindow from '../WebRtcWindow/WebRtcWindow';
 import { WebSocketContext } from '../WebSocket/WebSocket';
 
@@ -19,27 +21,36 @@ function CameraToggle() {
   const camera_choice = useSelector(
     (state) => state.renderingState.camera_choice,
   );
-  const set_camera_choice = (event: SelectChangeEvent) => {
-    const value = event.target.value;
-    dispatch({
-      type: 'write',
-      path: 'renderingState/camera_choice',
-      data: value,
-    });
+  const set_camera_choice = (event: SelectChangeEvent, value: string[]) => {
+    if (value != null) {
+      dispatch({
+        type: 'write',
+        path: 'renderingState/camera_choice',
+        data: value,
+      });
+    }
   };
 
   return (
     <ToggleButtonGroup
-      color="primary"
       value={camera_choice}
       exclusive
       onChange={set_camera_choice}
       aria-label="camera view"
       size="small"
-      varient="filled"
     >
-      <ToggleButton value="Main Camera">Viewport</ToggleButton>
-      <ToggleButton value="Render Camera">Render View</ToggleButton>
+      <ToggleButton value="Main Camera" disableRipple sx={{ width: '160px' }}>
+        <ThreeDRotationIcon fontSize="small" sx={{ mr: 1, ml: -0.5 }} />
+        Viewport
+      </ToggleButton>
+      <ToggleButton value="Render Camera" disableRipple sx={{ width: '160px' }}>
+        <VideoCameraBackIcon
+          value="Render Camera"
+          fontSize="small"
+          sx={{ mr: 1, ml: 0.5 }}
+        />
+        Render View
+      </ToggleButton>
     </ToggleButtonGroup>
   );
 }

nerfstudio/viewer/app/src/themes/theme.ts

@@ -126,10 +126,13 @@ export const appTheme = createTheme({
       styleOverrides: {
         root: {
           color: '#eeeeee',
-          backgroundColor: '#393e46',
+          backgroundColor: 'FFD369',
           '&.Mui-selected': {
-            color: '#FFD369',
-            backgroundColor: '#555555',
+            color: '#222831',
+            backgroundColor: '#FFD369',
+            ':hover': {
+              backgroundColor: '#FFD369',
+            },
           },
           '&.Mui-disabled': {
             color: '#999999',