Implement dashboard for when you don't need to be looking at ROS messages

app/config/main.yaml

@@ -0,0 +1,3 @@
+# The WebSocket IP to use to connect to ROS.
+# Default: "ws://127.0.0.1:9090".
+rosIp: "ws://127.0.0.1:9090"

app/package.json

@@ -19,12 +19,16 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/inter": "^5.1.1",
+    "@modyfi/vite-plugin-yaml": "^1.1.1",
     "@mui/icons-material": "^6.4.5",
     "@mui/material": "^6.4.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
+    "@types/js-yaml": "^4.0.9",
+    "ajv": "8",
     "date-fns": "^4.1.0",
+    "js-yaml": "^4.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

app/src/components/App.tsx

@@ -1,21 +1,36 @@
 import { Box, Grid2 as Grid } from "@mui/material";
 import { useContext, useState } from "react";
+import { Status } from "../types/status";
 import Console from "./Console/Console";
+import Dashboard from "./Dashboard/Dashboard";
 import NavBar from "./NavBar/NavBar";
 import NodeManager from "./NodeManager/NodeManager";
 import { GlobalStatusContext } from "./Providers/ROSProvider";
-import "/src/css/App.css";
 
 /**
  * The entry point of the program.
  */
 function App() {
   const [selectedNode, setSelectedNode] = useState<string | null>(null);
-  const { globalStatus, setGlobalStatus } = useContext(GlobalStatusContext);
+  const { globalStatusHistory, setGlobalStatusHistory } =
+    useContext(GlobalStatusContext);
+
+  const mainSection =
+    selectedNode == null ? (
+      <Dashboard />
+    ) : (
+      <Console
+        selectedNode={selectedNode}
+        clearSelectedNode={() => setSelectedNode(null)}
+      />
+    );
 
   return (
     <Box sx={{ height: "100dvh", display: "flex", flexDirection: "column" }}>
-      <NavBar status={globalStatus} setStatus={setGlobalStatus} />
+      <NavBar
+        status={globalStatusHistory.at(-1)?.status ?? Status.Unknown}
+        setStatus={setGlobalStatusHistory}
+      />
       <Grid
         container
         spacing={0}
@@ -31,10 +46,7 @@ function App() {
           />
         </Grid>
         <Grid size={8} height="100%">
-          <Console
-            selectedNode={selectedNode}
-            clearSelectedNode={() => setSelectedNode(null)}
-          />
+          {mainSection}
         </Grid>
       </Grid>
     </Box>

app/src/components/Console/Console.tsx

@@ -16,7 +16,6 @@ function Console({ ...props }: Console) {
   const consoleTitle = props.selectedNode
     ? `Console: ${props.selectedNode}`
     : "Console";
-  const visibility = props.selectedNode ? undefined : { visibility: "hidden" };
   const consoleOutputRef = useRef<HTMLDivElement>(null);
   const rawSocketHistory = useContext(WSHistoryContext);
   const filteredSocketHistory = rawSocketHistory[props.selectedNode || ""];
@@ -59,7 +58,7 @@ function Console({ ...props }: Console) {
     // This isn't perfect but it mostly works.
     if (!autoScroll && socketHistory.length === maxHistoryLength) {
       const { current } = consoleOutputRef;
-      current.scrollTop -= 14; // 14px represents roughly 1 line
+      current.scrollTop -= 12; // 12px represents roughly 1 line
     }
   }, [socketHistory, autoScroll]);
 
@@ -97,9 +96,10 @@ function Console({ ...props }: Console) {
         return `[${format(msg.timestamp, "HH:mm:ss.SSS")}] [${msg.topic}] ${msg.message}`;
       })
       .join("\n");
-    if (text === "")
+    if (text === "") {
       text =
         "No messages received yet. Perhaps you should try changing your filters?";
+    }
     if (socketHistory.length === maxHistoryLength) {
       text = `...history limited to ${maxHistoryLength} lines\n${text}`;
     }
@@ -112,39 +112,42 @@ function Console({ ...props }: Console) {
         height: "inherit",
         display: "flex",
         flexDirection: "column",
-        borderRadius: "20px 0 0 0",
+        borderRadius: "12px 0 0 0",
       }}
     >
-      <Box sx={{ pl: 2, pr: 2, pt: 1.5 }}>
+      <Box sx={{ px: 1.5, py: 1 }}>
         <Stack
           direction="row"
           justifyContent="space-between"
           alignItems="center"
+          sx={{ mb: 1 }}
         >
           <Typography
             variant="h6"
             sx={{
               whiteSpace: "nowrap",
               overflow: "hidden",
               textOverflow: "ellipsis",
+              fontWeight: 600,
             }}
           >
             {consoleTitle}
           </Typography>
           <IconButton
             onClick={props.clearSelectedNode}
             sx={{
-              borderRadius: 25,
+              borderRadius: 20,
               scale: 0.95,
               border: "1px solid",
-              borderColor: "lightgray",
+              borderColor: "divider",
+              bgcolor: "#404040",
               ":hover": {
-                borderColor: "gray",
+                borderColor: "primary.main",
+                bgcolor: "#505050",
               },
-              ...visibility,
             }}
           >
-            <Close />
+            <Close sx={{ fontSize: "1.2rem" }} />
           </IconButton>
         </Stack>
         <ConsoleFilters
@@ -157,18 +160,24 @@ function Console({ ...props }: Console) {
         ref={consoleOutputRef}
         onScroll={checkEnableAutoScroll}
         sx={{
-          bgcolor: "#222",
-          height: "60vh",
-          color: "#eee",
+          bgcolor: "background.default",
           textAlign: "left",
           overflow: "scroll",
           flexGrow: 1,
-          borderRadius: "6px",
           m: 1,
-          p: 1,
+          p: 1.5,
         }}
       >
-        <pre style={{ margin: 0, padding: 0, whiteSpace: "pre-wrap" }}>
+        <pre
+          style={{
+            margin: 0,
+            padding: 0,
+            whiteSpace: "pre-wrap",
+            fontSize: "0.75rem",
+            lineHeight: 1.2,
+            fontFamily: "Cascadia Code, monospace",
+          }}
+        >
           {renderConsoleText()}
         </pre>
       </Paper>

app/src/components/Console/ConsoleFilters.tsx

@@ -28,7 +28,12 @@ function ConsoleFilters({ ...props }: ConsoleFilters) {
     }
 
     if (enabledChips.length + disabledChips.length === 0) {
-      return <Chip label="No topics in node!" sx={{ ml: 1 }} />;
+      return (
+        <Chip
+          label="No topics in node!"
+          sx={{ ml: 0.5, height: "28px", fontSize: "0.8rem" }}
+        />
+      );
     }
     return [...enabledChips, ...disabledChips]; // so they are organized :)
   }
@@ -46,7 +51,15 @@ function ConsoleFilters({ ...props }: ConsoleFilters) {
         <Chip
           key={topic}
           label={topic}
-          sx={{ ml: 1 }}
+          size="small"
+          sx={{
+            ml: 0.5,
+            height: "28px",
+            fontSize: "0.8rem",
+            "& .MuiChip-label": {
+              px: 1.5,
+            },
+          }}
           color="primary"
           onDelete={() => disableTopic(topic)}
           onClick={() => disableTopic(topic)}
@@ -57,7 +70,15 @@ function ConsoleFilters({ ...props }: ConsoleFilters) {
       <Chip
         key={topic}
         label={topic}
-        sx={{ ml: 1 }}
+        size="small"
+        sx={{
+          ml: 0.5,
+          height: "28px",
+          fontSize: "0.8rem",
+          "& .MuiChip-label": {
+            px: 1.5,
+          },
+        }}
         variant="outlined"
         onClick={() => enableTopic(topic)}
       />
@@ -97,10 +118,16 @@ function ConsoleFilters({ ...props }: ConsoleFilters) {
     return (
       <ToggleButton
         sx={{
-          borderRadius: 10,
-          scale: 0.85,
+          borderRadius: 8,
+          scale: 0.8,
+          height: "28px",
+          minWidth: "36px",
+          border: "1px solid",
+          borderColor: "divider",
+          bgcolor: "#404040",
           ":hover": {
-            borderColor: "gray",
+            borderColor: "primary.main",
+            bgcolor: "#505050",
           },
         }}
         size="small"
@@ -110,7 +137,7 @@ function ConsoleFilters({ ...props }: ConsoleFilters) {
           setShowFilters((prev) => !prev);
         }}
       >
-        <FilterList />
+        <FilterList sx={{ fontSize: "1rem" }} />
       </ToggleButton>
     );
   }
@@ -129,6 +156,7 @@ function ConsoleFilters({ ...props }: ConsoleFilters) {
         },
         msOverflowStyle: "none", // IE and Edge
         whiteSpace: "nowrap", // Keeps content in a single line
+        py: 0.5,
       }}
     >
       {renderToggleShowButton()}

app/src/components/Dashboard/CurrentTask.tsx

@@ -0,0 +1,74 @@
+import { Typography } from "@mui/material";
+import { useContext, useState } from "react";
+import { formatTimeDifference } from "../../util/util";
+import { GlobalStatusContext } from "../Providers/ROSProvider";
+import DashboardCard from "./DashboardCard";
+import TaskHistoryDialog from "./TaskHistoryDialog";
+
+/**
+ * "Current Task" section of the dashboard, displays the extended
+ * status of the latest status message (or "Unknown if that is
+ * undefined"). The latest status should be the last item in the
+ * `globalStatusHistory` array.
+ */
+function CurrentTask() {
+  const { globalStatusHistory } = useContext(GlobalStatusContext);
+  const [historyDialogOpen, setHistoryDialogOpen] = useState(false);
+
+  const handleOpenHistory = () => {
+    setHistoryDialogOpen(true);
+  };
+
+  const handleCloseHistory = () => {
+    setHistoryDialogOpen(false);
+  };
+
+  const prevTasks = globalStatusHistory.length - 1;
+
+  return (
+    <>
+      <DashboardCard
+        title="Current Task"
+        action={{
+          label: "History",
+          onClick: handleOpenHistory,
+        }}
+      >
+        <Typography
+          sx={{
+            color: "text.secondary",
+            fontSize: "0.8rem",
+            lineHeight: 1.3,
+          }}
+        >
+          {prevTasks} previous task
+          {/* Make plural when prevTasks != 1 */}
+          {prevTasks !== 1 && "s"}
+        </Typography>
+        <Typography
+          sx={{
+            color: "text.secondary",
+            fontSize: "0.8rem",
+            lineHeight: 1.3,
+          }}
+        >
+          {globalStatusHistory.at(-1)?.extendedStatus ?? "Unknown"} (
+          {!!globalStatusHistory.at(-1)?.timestamp &&
+            formatTimeDifference(
+              globalStatusHistory.at(-1)!.timestamp,
+              new Date(),
+            )}
+          )
+        </Typography>
+      </DashboardCard>
+
+      <TaskHistoryDialog
+        open={historyDialogOpen}
+        onClose={handleCloseHistory}
+        statusHistory={globalStatusHistory}
+      />
+    </>
+  );
+}
+
+export default CurrentTask;