From e48468cfaee7d38ef05b4fb59df179a18a52c1db Mon Sep 17 00:00:00 2001
From: Matthew Tancik <tancik@berkeley.edu>
Date: Mon, 17 Apr 2023 23:34:19 -0700
Subject: [PATCH] Update disconnected state UI (#1758)

---
 nerfstudio/viewer/app/src/index.scss          | 29 +++++++++++++++++--
 .../src/modules/RenderWindow/RenderWindow.jsx | 10 +++++++
 .../SidePanel/StatusPanel/StatusPanel.jsx     | 12 --------
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/nerfstudio/viewer/app/src/index.scss b/nerfstudio/viewer/app/src/index.scss
index a3af6c244..83e09b372 100644
--- a/nerfstudio/viewer/app/src/index.scss
+++ b/nerfstudio/viewer/app/src/index.scss
@@ -17,6 +17,7 @@ code {
 .App {
   position: relative;
   height: 100vh;
+  background-color: #1d222a;
 }
 
 $base-color1: #292d39;
@@ -358,8 +359,32 @@ $sidebar-width: 100% !default;
   border: $custom-border;
 }
 
-.RenderWindow {
-  z-index: 1;
+#not-connected-overlay {
+  position: absolute;
+  background-color: #1d222a;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  z-index: 10;
+  opacity: 0.8;
+}
+
+#not-connected-overlay-text {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #393939;
+  border-radius: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  color: #ff6969;
+  font-size: 18px;
+  z-index: 10;
 }
 
 .ViewerWindow-render-crop-container {
diff --git a/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx b/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx
index 598a13298..e6c7e6d5f 100644
--- a/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx
+++ b/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx
@@ -1,13 +1,23 @@
 import * as React from 'react';
+import { useSelector } from 'react-redux';
 
 export default function RenderWindow() {
+  const isWebsocketConnected = useSelector(
+    (state) => state.websocketState.isConnected,
+  );
+
   return (
     <div className="RenderWindow">
+      <div id="not-connected-overlay" hidden={isWebsocketConnected}>
+        <div id="not-connected-overlay-text">Renderer Disconnected</div>
+      </div>
       <img
         id="background-image"
         width="100%"
         height="100%"
         alt="Render window"
+        z-index="1"
+        hidden={!isWebsocketConnected}
       />
     </div>
   );
diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx
index a330f0311..d3f49ffab 100644
--- a/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx
+++ b/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx
@@ -66,11 +66,6 @@ export default function StatusPanel(props: StatusPanelProps) {
   const is_training_text = isTraining ? 'Pause Training' : 'Resume Training';
   const training_icon = isTraining ? <PauseIcon /> : <PlayArrowIcon />;
 
-  const websocket_connected_text = isWebsocketConnected
-    ? 'Renderer Connected'
-    : 'Renderer Disconnected';
-  const websocket_connected_color = isWebsocketConnected ? 'success' : 'error';
-
   return (
     <div className="StatusPanel">
       <div className="StatusPanel-play-button">
@@ -128,13 +123,6 @@ export default function StatusPanel(props: StatusPanelProps) {
           <b>Resolution:</b> {eval_res}
         </div>
       </div>
-      <Button
-        className="StatusPanel-button"
-        color={websocket_connected_color}
-        style={{ textTransform: 'none' }}
-      >
-        {websocket_connected_text}
-      </Button>
     </div>
   );
 }