Display system status: Active, Pause, Resetting.

frontend/src/config.ts

@@ -13,6 +13,8 @@ export const EGOVLP_ACTION_STEPS_STREAM = 'egovlp:action:steps';
 export const CLIP_ACTION_STEPS_STREAM = 'clip:action:steps';
 export const DETIC_HANDS_STREAM = 'detic:hands';
 export const MAIN_STREAM = 'main';
+export const PAUSE_REASONING = 'arui:pause';
+export const RESET_REASONING = 'arui:reset';
 
 export const RECORDINGS_UPLOAD_PATh = "/recordings/upload/"
 

frontend/src/tabs/DebuggingDataView/DebuggingDataView.tsx

@@ -3,8 +3,8 @@ import { StreamView } from '../LiveDataView/components/StreamDataView/LiveStream
 import { DeticHandsChart } from '../LiveDataView/components/StreamDataView/LiveCharts';
 import { ImageView } from '../LiveDataView/components/StreamDataView/ImageView';
 import { ClipOutputsView, DeticOutputsView, DeticStateOutputsView, MemoryOutputsView } from '../LiveDataView/components/StreamDataView/PerceptionOutputsView';
-import { ReasoningOutputsView } from '../LiveDataView/components/StreamDataView/ReasoningOutputsView';
-import { DETIC_HANDS_STREAM, DETIC_IMAGE_STREAM, DETIC_MEMORY, EGOVLP_ACTION_STEPS_STREAM, MAIN_STREAM, REASONING_CHECK_STREAM } from '../../config';
+import { PauseView, ReasoningOutputsView, ResetView } from '../LiveDataView/components/StreamDataView/ReasoningOutputsView';
+import { DETIC_HANDS_STREAM, DETIC_IMAGE_STREAM, DETIC_MEMORY, EGOVLP_ACTION_STEPS_STREAM, MAIN_STREAM, PAUSE_REASONING, REASONING_CHECK_STREAM, RESET_REASONING } from '../../config';
 
 function DebuggingDataView() {
   return (
@@ -23,15 +23,22 @@ function DebuggingDataView() {
         </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' }}>
+          <StreamView utf streamId={PAUSE_REASONING} showStreamId={false} showTime={false} showStreamStatus={false}>
+            {data => (<Box pt={"3px"}><PauseView data={data} /></Box>)}
+          </StreamView>
+          <StreamView utf streamId={RESET_REASONING} showStreamId={false} showTime={false} showStreamStatus={false}>
+            {data => (<Box pt={"3px"}><ResetView data={data} /></Box>)}
+          </StreamView>
+        </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={-25} pt={"23px"}><DeticStateOutputsView data_={JSON.parse(data)} /></Box>)}
+            {data => (<Box mt={2} pt={"23px"}><DeticStateOutputsView data_={JSON.parse(data)} /></Box>)}
           </StreamView>
         </Box>
         {/* <Box sx={{ gridArea: 'e' }}><StreamView utf parse='prettyJSON' streamId={'reasoning'} /></Box> */}

frontend/src/tabs/LiveDataView/LiveDataView.tsx

@@ -71,21 +71,20 @@ function LiveVideo() {
           gridTemplateAreas: {
             lg: `
               "c c c c c c"
+              "h M M M M i"
               "h M M M M r"
-              "g M M M M a"
-              "g M M M M a"
+              "g M M M M r"
             `,
             md: `
               "c c c c c c"
+              "h M M M M i"
               "h M M M M r"
-              "g M M M M a"
-              "g M M M M a"
+              "g M M M M r"
             `,
             xs: `
               "c c c c c c"
-              "h M M M M r"
-              "g M M M M a"
-              "g M M M M a"
+              "h M M M M i"
+              "g M M M M r"
             `
           },
         }}>

frontend/src/tabs/LiveDataView/components/StreamDataView/LiveStream.tsx

@@ -43,13 +43,17 @@ export const StreamInfo = ({ sid, time, displayStatus=true, data, readyState, ch
             {time && <Chip label={new Date(time).toLocaleString()} size="small" />}
         </Box>
         {
-        displayStatus && <Badge color={openNoData ? 'secondary' : STATUS_COLOR[readyState]} badgeContent={
+        displayStatus ? <Badge color={openNoData ? 'secondary' : STATUS_COLOR[readyState]} badgeContent={
         <Tooltip title={openNoData ? 'Open - no data' : STATUS_MSG[readyState]} placement='top'><span style={{opacity: 0}}>0</span></Tooltip>
         } sx={{display: 'block', '& .MuiBadge-badge': {height: '10px', minWidth: '10px'}}}>
             <Box>
             {children}
             </Box>
         </Badge>
+        :
+        <Box>
+            {children}
+        </Box>
         }
 </Box>
 }

frontend/src/tabs/LiveDataView/components/StreamDataView/PerceptionOutputsView.tsx

@@ -39,9 +39,9 @@ export const DeticStateOutputsView = ({ data_, min=0 } ) => {
   var objectsState = data_ && data_.map((data: DeticOutputsViewProps, index) => {
     const entries = data && data['state'] && Object.entries(data['state'] );
     const noAction = entries && entries.every(([t,s]) => s === 0)
-    return  entries && (<Box display='flex' flexDirection='column'>
+    return  entries && (<Box key={'DeticStateOutputsView_' + index} display='flex' flexDirection='column'>
       <span> {data['label']}</span>
-    {noAction && <Chip label='No Action' color='error' />}
+    {noAction && <Chip key={'DeticStateOutputsView_' +"noaction"+ index} label='No Action' color='error' />}
     {entries && entries.sort(([ta, sa], [tb,sb]) => ( sb-sa ))
           .slice(0, noAction ? 2 : 3)
           .map(([text, similarity]) => (
@@ -78,7 +78,7 @@ export const DeticOutputsView = ({data}: {data: ObjLabel []}) => {
   });
   var detectedObjects = Object.keys(listLabels).length>0 && Object.keys(listLabels).map((element:string, index: number) => {
     var label= element + ":" + listLabels[element];
-    return <Chip label={label} size="small" />
+    return <Chip key={'DeticOutputsView_' + index} label={label} size="small" />
     });
   return (
     <>
@@ -103,7 +103,7 @@ export const MemoryOutputsView = ({data}: {data: ObjLabel []}) => {
   });
   var detectedObjects = Object.keys(listLabels).length>0 && Object.keys(listLabels).map((element:string, index: number) => {
     var label= element + ":" + listLabels[element];
-    return <Chip label={label} size="small" />
+    return <Chip key={'MemoryOutputsView_' + index} label={label} size="small" />
     });
   return (
     <>

frontend/src/tabs/LiveDataView/components/StreamDataView/ReasoningOutputsView.tsx

@@ -1,4 +1,4 @@
-import {Box, Chip, Button } from '@mui/material';
+import {Box, Chip, Button, Alert, AlertTitle } from '@mui/material';
 import { useRecordingControls } from '../../../../api/rest';
 import DoneIcon from '@mui/icons-material/Done';
 import RotateLeftIcon from '@mui/icons-material/RotateLeft';
@@ -10,6 +10,7 @@ import { DETIC_IMAGE_STREAM, REASONING_ENTITIES_STREAM } from '../../../../confi
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import WozStatusComp from '../../../IntervenorView/woz-status';
+import React, { useState, useEffect, useContext } from 'react';
 
 interface Entity {
   ingredients: string [],
@@ -39,6 +40,33 @@ interface InProgressTask {
 let entities: Entities [] = [];
 let inProgressTask_: InProgressTask[]=[];
 let flag = true;
+let systemStatus = "Active";
+
+export const PauseView = ({ data }) => {
+  if(data=="start"){
+    systemStatus = "PAUSE";
+  }
+  if(data=="resume"){
+    systemStatus = "Active";
+  }
+  return <Alert severity="info"><strong>System Status: </strong>{systemStatus}</Alert>;
+}
+
+export const ResetView = ({ data }) => {
+  let message = "";
+  let showResetMessage = data=="reset";
+  if(showResetMessage){
+    message = "Resetting ...";
+  }
+  useEffect(() => {
+    // when the component is mounted, the alert is displayed for 3 seconds
+    setTimeout(() => {
+      message = "";
+    }, 3000);
+  }, [data]);
+  return showResetMessage ? <Alert severity="warning"><strong>{message} </strong></Alert> :<></>;
+}
+
 export const ReasoningOutputsView = ({ data }) => {
   var activeTasks = data && data['active_tasks'] && data['active_tasks'].map((active_tasks, index) => {
   const {task_id, task_name, step_id, step_status, step_description, error_status, error_description} = active_tasks || {}; // reading the prediction that has the highest probability.
@@ -48,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 display='flex' flexDirection='column' pt={5} mr={2} ml={2}>
+  return active_tasks && (<Box key={'ReasoningOutputsView_activetask_' + index}  display='flex' flexDirection='column' pt={5} 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>
@@ -60,7 +88,7 @@ export const ReasoningOutputsView = ({ data }) => {
 
   const inprogress_tasks = data && data["inprogress_task_ids"];
   const listinprogress  = inProgressTask_ && inProgressTask_.map((element:InProgressTask, index: number) => {
-    return inprogress_tasks && inprogress_tasks.includes(element.id) && (<Chip label={element.name} size="small" />)
+    return inprogress_tasks && inprogress_tasks.includes(element.id) && (<Chip key={'ReasoningOutputsView_inprogresstask_' + index}  label={element.name} size="small" />)
     });
   return <Box display='flex' flexDirection='column' pt={5} mr={2} ml={2}>
     <span><b>Active Tasks:</b> {data && data['active_tasks'] && data['active_tasks'].length} tasks</span>