Improve online mode interface.

VIDA-NYU · Nov 4, 2023 · 1538632 · 1538632
1 parent 323648e
commit 1538632
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 20 deletions.
diff --git a/frontend/src/tabs/DebuggingDataView/DebuggingDataView.tsx b/frontend/src/tabs/DebuggingDataView/DebuggingDataView.tsx
@@ -18,12 +18,16 @@ function DebuggingDataView() {
         </Box> */}
         <Box sx={{ gridArea: 'h'}}>
             <StreamView utf streamId={DETIC_MEMORY} showStreamId={true} showTime={false}>
-                {data => (<Box pt={"28px"}><MemoryOutputsView data={JSON.parse(data)} /></Box>)}
+                {data => (<Box pl={2} pb={3} pr={1} pt={"28px"} style={{width: '100%', borderRadius: '8px', border: '2px solid #e3f2fd', fontSize: '13px'}}><MemoryOutputsView data={JSON.parse(data)} /></Box>)}
             </StreamView>
         </Box>
-
+        <Box sx={{ gridArea: 'g'}}>
+          <StreamView utf streamId={DETIC_MEMORY} showTime={false}>
+            {data => (<Box pl={2} pb={3} pr={1} pt={"23px"} style={{width: '100%', borderRadius: '8px', border: '2px solid #e3f2fd', fontSize: '13px'}}><DeticStateOutputsView data_={JSON.parse(data)} /></Box>)}
+          </StreamView>
+        </Box>
         <Box sx={{ gridArea: 'M' }}><ImageView streamId={MAIN_STREAM} showStreamId={false} boxStreamId={DETIC_IMAGE_STREAM} confidence={0.5} debugMode={true}/></Box>
-        <Box sx={{ gridArea: 'i' }}>
+        <Box sx={{ gridArea: 'i', gridRow: '1' }}>
           <StreamView utf streamId={PAUSE_REASONING} showStreamId={false} showTime={false} showStreamStatus={false}>
             {data => (<Box pt={"3px"}><PauseView data={data} /></Box>)}
           </StreamView>
@@ -33,14 +37,10 @@ function DebuggingDataView() {
         </Box>
         <Box sx={{ gridArea: 'r' }}>
           <StreamView utf streamId={REASONING_CHECK_STREAM} showStreamId={true} showTime={false}>
-            {data => (<Box><ReasoningOutputsView data={JSON.parse(data)} /></Box>)}
-          </StreamView>
-        </Box>
-        <Box sx={{ gridArea: 'g' }}>
-          <StreamView utf streamId={DETIC_MEMORY} showTime={false}>
-            {data => (<Box mt={2} pt={"23px"}><DeticStateOutputsView data_={JSON.parse(data)} /></Box>)}
+            {data => (<Box pb={3} style={{width: '100%', borderRadius: '8px', border: '2px solid #e3f2fd', fontSize: '14px'}}><ReasoningOutputsView data={JSON.parse(data)} /></Box>)}
           </StreamView>
         </Box>
+
         {/* <Box sx={{ gridArea: 'e' }}><StreamView utf parse='prettyJSON' streamId={'reasoning'} /></Box> */}
       </>
   )

diff --git a/frontend/src/tabs/LiveDataView/LiveDataView.tsx b/frontend/src/tabs/LiveDataView/LiveDataView.tsx
@@ -66,29 +66,27 @@ function LiveVideo() {
         sx={{
           display: 'grid',
           gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
-          gap: 1,
+          gap:1,
           gridTemplateRows: 'auto',
           gridTemplateAreas: {
             lg: `
-              "c c c c c c"
-              "h M M M M i"
+              "c c c c c i"
               "h M M M M r"
               "g M M M M r"
             `,
             md: `
-              "c c c c c c"
-              "h M M M M i"
+              "c c c c c i"
               "h M M M M r"
               "g M M M M r"
             `,
             xs: `
-              "c c c c c c"
-              "h M M M M i"
+              "c c c c c i"
+              "h M M M M r"
               "g M M M M r"
             `
           },
         }}>
-        <Box sx={{ gridArea: 'c', marginTop: 4 }}><RecordingControls /></Box>
+        <Box sx={{ gridArea: 'c', marginTop: 2 }}><RecordingControls /></Box>
         <DebuggingDataView />
       </Box>
     </Box>

diff --git a/frontend/src/tabs/LiveDataView/components/StreamDataView/ImageView.tsx b/frontend/src/tabs/LiveDataView/components/StreamDataView/ImageView.tsx
@@ -136,7 +136,7 @@ const ImageCanvas = ({ image=null, boxes=null, tracklets=null, confidence: defau
         img.src = src;
         return () => { URL.revokeObjectURL(src) }
     }, [image, boxes, confidence])
-    return <Box>
+    return <Box style={{ fontSize: '13px'}}>
         <canvas ref={canvasRef} style={{width: '100%', borderRadius: '8px', border: '2px solid #ececec'}} {...rest} />
         { debugMode && <Grid container spacing={2} alignItems="center">
             <Grid item style={{marginTop:'-25px'}}>

diff --git a/frontend/src/tabs/LiveDataView/components/StreamDataView/LiveStream.tsx b/frontend/src/tabs/LiveDataView/components/StreamDataView/LiveStream.tsx
@@ -6,6 +6,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Chip from '@mui/material/Chip';
 import { ReadyState } from 'react-use-websocket';
 import { useStreamData } from '../../../../api/rest';
+import { purple, grey } from '@mui/material/colors';
 
 const STATUS_MSG = {
     [ReadyState.CONNECTING]: 'Connecting',
@@ -39,7 +40,7 @@ export const StreamInfo = ({ sid, time, displayStatus=true, data, readyState, ch
     const openNoData = readyState == ReadyState.OPEN && !data;
     return <Box sx={{ position: 'relative', maxWidth: '100%' }}>
         <Box display='flex' sx={{ gap: '0.5em', zIndex: 1, position: 'absolute' }}>
-            {sid && <Chip label={sid} size="small" color='primary' />}
+            {sid && <Chip label={sid} size="small" color={'primary'}/>}
             {time && <Chip label={new Date(time).toLocaleString()} size="small" />}
         </Box>
         {

diff --git a/frontend/src/tabs/LiveDataView/components/StreamDataView/ReasoningOutputsView.tsx b/frontend/src/tabs/LiveDataView/components/StreamDataView/ReasoningOutputsView.tsx
@@ -76,7 +76,7 @@ export const ReasoningOutputsView = ({ data }) => {
   if (!inProgressTask_.find(e => e.id === task_id)) {
     inProgressTask_.push({id: task_id, name: task_name});
   } 
-  return active_tasks && (<Box key={'ReasoningOutputsView_activetask_' + index}  display='flex' flexDirection='column' pt={5} mr={2} ml={2}>
+  return active_tasks && (<Box key={'ReasoningOutputsView_activetask_' + index}  display='flex' flexDirection='column' pt={1} mr={2} ml={2}>
       <span><b>Task ID:</b> {task_id}</span>
       <span><b>Task Name:</b> {task_name}</span>  
       <span><b>Current Step:</b> {current_step}</span>