From 61a9ed7357d0fb6a0ef39491957cfa4b84745dab Mon Sep 17 00:00:00 2001
From: Edward Choi <edwardc1028@berkeley.edu>
Date: Wed, 21 Apr 2021 20:15:23 -0700
Subject: [PATCH] Add units for latency display (#92)

* Add units for latency display

* Variable renaming
---
 renderer/components/DNav.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/renderer/components/DNav.tsx b/renderer/components/DNav.tsx
index 1e81a2c0..2e23ed29 100644
--- a/renderer/components/DNav.tsx
+++ b/renderer/components/DNav.tsx
@@ -34,6 +34,7 @@ type Props = StateProps & OwnProps;
 
 const LOW_LATENCY_THRESHOLD_MSEC = 200;
 const HIGH_LATENCY_THRESHOLD_MSEC = 300;
+const MSEC_IN_ONE_SECOND = 1000;
 
 /**
  * 3 Icons at the top right of Dawn: Tour, RobotIP, Upload
@@ -60,6 +61,15 @@ const DNavComponent = (props: Props) => {
     }
   }
 
+  const formatLatencyValue = (latency: number) => {
+    if (latency > MSEC_IN_ONE_SECOND) {
+      latency = latency / MSEC_IN_ONE_SECOND;
+      return `${latency} sec`;
+    }
+
+    return `${latency} ms`;
+  }
+
   const {
     connectionStatus,
     runtimeStatus,
@@ -112,7 +122,7 @@ const DNavComponent = (props: Props) => {
           />
         </Navbar.Text>
         <Navbar.Text id="Latency">
-          <Label bsStyle={getLatencyThresholdColor(props.latencyValue)}>{`Latency: ${props.latencyValue}`}</Label>
+          <Label bsStyle={getLatencyThresholdColor(props.latencyValue)}>{`Latency: ${formatLatencyValue(props.latencyValue)}`}</Label>
         </Navbar.Text>
         <Navbar.Form pullRight>
           <ButtonToolbar>