feat: add path navigator & table for state variable (#319)

* feat: add path navigator & table for state variable

Features:
- Added path navigator to graph in ViewGroup page
- Added table to display state variables in ViewGroup page
- Dashboard tables now have pagination and column sorting

Misc:
- Removed "completed" card when viewing the dashboard

* chore: lint

Author: Brad123ghost

frontend/src/features/dashboard/Dashboard.jsx

@@ -35,9 +35,8 @@ export default function Dashboard() {
       (group) => group.path.length != 0
     ).length;
     // Placeholder here, needs an update for when the group completes a scenario it sets a var in the database, probs alr exist but will implement this later
-    const groupsCompleted = 0;
     return (
-      <div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         <div className="bg-white col-auto border rounded-xl p-2 text-center">
           <h3 className="text-xl font-mona font-bold">Groups</h3>
           <p className="text-lg">{totalGroups}</p>
@@ -50,14 +49,9 @@ export default function Dashboard() {
           <h3 className="text-xl font-mona font-bold ">Started</h3>
           <p className="text-lg">{groupsStarted}</p>
         </div>
-        <div className="bg-green-300 col-auto border rounded-xl p-2 text-center">
-          <h3 className="text-xl font-mona font-bold">Completed</h3>
-          <p className="text-lg">{groupsCompleted}</p>
-        </div>
       </div>
     );
   };
-  // Is it better to just show a loading screen instead of conditionally rendering the content to stop it flashing?
   /**
    * Is it better to just show a loading screen instead of conditionally rendering the content to stop it
    * flashing?

frontend/src/features/dashboard/ViewGroup.jsx

@@ -10,6 +10,19 @@ import { MarkerType, ReactFlowProvider } from "@xyflow/react";
 import ScenarioGraph from "./components/Graph";
 import TestTable from "./components/Table";
 import { Skeleton } from "@mui/material";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableFooter from "@mui/material/TableFooter";
+import TablePagination from "@mui/material/TablePagination";
+import { Paper, Typography } from "@material-ui/core";
+import TablePaginationActions from "./components/TablePaginationAction";
+import useStyles from "./components/TableStyle";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import getComparator from "./components/TableHelper";
 /**
  * Might move this logic to it's own file, this way we can render a basic path on the dasboard as well
  * as the viewgroup page.
@@ -28,7 +41,7 @@ export default function ViewGroupPage() {
     height: 15,
   };
 
-  const { nodes, edges, groupEdges } = useMemo(() => {
+  const { nodes, edges, groupEdges, groupPath, sceneMap } = useMemo(() => {
     var sceneMap = [];
     var groupPath = [];
     const nodes = [];
@@ -58,6 +71,7 @@ export default function ViewGroupPage() {
             components: scene.components,
             visited: visitCounter.get(scene._id) != undefined,
             visitCounter: visitCounter.get(scene._id),
+            isHighlighted: false,
           },
         });
       });
@@ -116,8 +130,9 @@ export default function ViewGroupPage() {
       edge.data = { label: edgeCounter.get(edge.id) };
     });
 
-    return { nodes, edges, groupEdges };
+    return { nodes, edges, groupEdges, groupPath, sceneMap };
   }, [scenes, groupInfo]);
+
   return (
     <ScreenContainer vertical>
       <DashTopBar back={`/dashboard/${scenarioId}`}>
@@ -129,7 +144,9 @@ export default function ViewGroupPage() {
             <h1 className="text-3xl font-mona font-bold my-3">
               Viewing Group {groupInfo.users[0].group}
             </h1>
+
             <TestTable groupInfo={groupInfo} />
+            <StateVarTable data={groupInfo.stateVariables} />
           </div>
           <div className="w-full h-full">
             <h1 className="text-3xl font-mona font-bold px-10 my-3">
@@ -161,6 +178,8 @@ export default function ViewGroupPage() {
                         inNodes={nodes}
                         inEdges={edges}
                         inGPathEdges={groupEdges}
+                        inGPath={groupPath}
+                        inSceneMap={sceneMap}
                         onLoaded={() => {
                           setGraphLoading(false);
                         }}
@@ -175,3 +194,142 @@ export default function ViewGroupPage() {
     </ScreenContainer>
   );
 }
+
+const StateVarTable = ({ data }) => {
+  const classes = useStyles();
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const emptyRows =
+    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - data.length) : 0;
+  const [order, setOrder] = useState("asc");
+  const [orderBy, setOrderBy] = useState("name");
+
+  const handleRequestSort = (property) => {
+    const isAsc = orderBy === property && order === "asc";
+    setOrder(isAsc ? "desc" : "asc");
+    setOrderBy(property);
+  };
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const visibleRows = useMemo(
+    () =>
+      [...data]
+        .sort(getComparator(order, orderBy))
+        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+    [order, orderBy, page, rowsPerPage]
+  );
+
+  const PaperContainer = ({ children }) => (
+    <div className={classes.root}>
+      <Paper>
+        <Typography variant="h5" component="h1" className={classes.heading}>
+          State Variables
+        </Typography>
+        {children}
+      </Paper>
+    </div>
+  );
+  if (data.length == 0) {
+    return (
+      <PaperContainer>
+        <div>
+          State variables will show up once the group has scdtarted the
+          scenario.
+        </div>
+      </PaperContainer>
+    );
+  } else {
+    return (
+      <PaperContainer>
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>
+                  <TableSortLabel
+                    active={orderBy === "name"}
+                    direction={orderBy === "name" ? order : "asc"}
+                    onClick={() => handleRequestSort("name")}
+                  >
+                    Name
+                  </TableSortLabel>
+                </TableCell>
+                <TableCell>
+                  <TableSortLabel
+                    active={orderBy === "type"}
+                    direction={orderBy === "type" ? order : "asc"}
+                    onClick={() => handleRequestSort("type")}
+                  >
+                    Type
+                  </TableSortLabel>
+                </TableCell>
+                <TableCell>
+                  <TableSortLabel
+                    active={orderBy === "value"}
+                    direction={orderBy === "value" ? order : "asc"}
+                    onClick={() => handleRequestSort("value")}
+                  >
+                    Value
+                  </TableSortLabel>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {visibleRows.map((stateVar) => (
+                <TableRow key={stateVar.id}>
+                  <TableCell>{stateVar.name}</TableCell>
+                  <TableCell>{stateVar.type}</TableCell>
+                  <TableCell>
+                    {stateVar.type === "boolean"
+                      ? stateVar.value
+                        ? "True"
+                        : "False"
+                      : stateVar.value}
+                  </TableCell>
+                </TableRow>
+              ))}
+              {emptyRows > 0 && (
+                <TableRow style={{ height: 53 * emptyRows }}>
+                  <TableCell colSpan={3} />
+                </TableRow>
+              )}
+            </TableBody>
+            <TableFooter>
+              <TableRow>
+                <TablePagination
+                  rowsPerPageOptions={[
+                    5,
+                    10,
+                    25,
+                    { label: "All", value: data.length },
+                  ]}
+                  colSpan={3}
+                  count={data.length}
+                  rowsPerPage={rowsPerPage}
+                  page={page}
+                  slotProps={{
+                    select: {
+                      inputProps: {
+                        "aria-label": "rows per page",
+                      },
+                      native: true,
+                    },
+                  }}
+                  onPageChange={handleChangePage}
+                  onRowsPerPageChange={handleChangeRowsPerPage}
+                  ActionsComponent={TablePaginationActions}
+                />
+              </TableRow>
+            </TableFooter>
+          </Table>
+        </TableContainer>
+      </PaperContainer>
+    );
+  }
+};

frontend/src/features/dashboard/components/CustomTypes.jsx

@@ -6,7 +6,7 @@ import { Badge } from "@material-ui/core";
 
 const NodeBase = ({ data }) => (
   <div
-    className={`bg-black w-40 text-center ${data.visited ? "" : "brightness-60"}`}
+    className={`bg-black w-40 text-center ${data.visited ? "" : "brightness-60"} ${data.isHighlighted ? "border-red-500 border-4" : ""}`}
   >
     <div>
       <Thumbnail components={data.components} />

frontend/src/features/dashboard/components/DashTopBar.jsx

@@ -26,7 +26,6 @@ export default function DashTopBar({ back = "/", children = [] }) {
       <div className={styles.topBar}>
         <ul className={styles.leftTopBarList}>
           <li className={styles.listItem}>
-            (
             <button
               className="btn vps w-[100px]"
               onClick={() => {
@@ -35,7 +34,6 @@ export default function DashTopBar({ back = "/", children = [] }) {
             >
               Back
             </button>
-            )
           </li>
         </ul>
         <div className={styles.rightTopBarList}>{children}</div>

frontend/src/features/dashboard/components/Graph.jsx

@@ -18,6 +18,8 @@ export default function ScenarioGraph({
   inNodes,
   inEdges,
   inGPathEdges,
+  inSceneMap,
+  inGPath,
   onLoaded,
 }) {
   /**
@@ -42,6 +44,7 @@ export default function ScenarioGraph({
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const [sizes, setSizes] = useState({});
+  const [currentIdx, setCurrentIdx] = useState(0);
 
   // Set up initial nodes and update edges with the group path if it exists
   const [newEdges, setNewEdges] = useState([]);
@@ -91,12 +94,44 @@ export default function ScenarioGraph({
     RenderGraph();
   }, [direction]);
 
+  // Update the nodes when a new selection is made
+  useEffect(() => {
+    handleNodeHighlighting();
+  }, [currentIdx, setNodes]);
+
+  function handleNodeHighlighting() {
+    if (inGPath.length == 0) return;
+    setNodes((tempNodes) =>
+      tempNodes.map((node) => {
+        if (node.id == inSceneMap[inGPath[currentIdx]]._id) {
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              isHighlighted: true,
+            },
+          };
+        }
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            isHighlighted: false,
+          },
+        };
+      })
+    );
+  }
+
   const gle = async (nodes, edges, options = {}, tempSizes) => {
     const graph = {
       id: "root",
       layoutOptions: options,
       children: nodes.map((node) => ({
         ...node,
+        data: {
+          ...node.data,
+        },
       })),
       edges: edges,
     };
@@ -125,6 +160,7 @@ export default function ScenarioGraph({
         setEdges(layoutedEdges);
         fitView();
         onLoaded();
+        handleNodeHighlighting();
       }
     );
     // console.log("Updated layout")
@@ -135,7 +171,6 @@ export default function ScenarioGraph({
    *  Need to add a counter to the nodes to show how many times a group has visited that scene
    *  Could make the nodes be grayed out and only show them normally if the group has visited them, makes it easier to visualize progress
    */
-
   return (
     <div className="h-full">
       <span className="text-sm opacity-80">
@@ -202,8 +237,57 @@ export default function ScenarioGraph({
             Reset Nodes
           </button>
         </Panel>
+        <Panel position="center-right">
+          {/* <NavigatorTable sceneMap={inSceneMap} groupPath={inGPath}/> */}
+          <PathNavigator
+            sceneMap={inSceneMap}
+            groupPath={inGPath}
+            idx={currentIdx}
+            setCurrentIdx={setCurrentIdx}
+          />
+        </Panel>
         <Background />
       </ReactFlow>
     </div>
   );
 }
+
+const PathNavigator = ({ sceneMap, groupPath, idx, setCurrentIdx }) => {
+  if (groupPath.length == 0) return <></>;
+  function updateIndex(d) {
+    setCurrentIdx((prev) => {
+      const newIdx = prev + d;
+      if (newIdx < 0 || newIdx >= groupPath.length) return prev;
+      return newIdx;
+    });
+  }
+
+  return (
+    <div>
+      <div className="grid justify-items-end">
+        <p>Current Node:</p>
+        <p className="">{sceneMap[groupPath[idx]].name}</p>
+        <div>
+          <button
+            className="bg-white text-black rounded-lg px-2 hover:cursor-pointer hover:bg-gray-200 disabled:opacity-50"
+            disabled={idx == 0}
+            onClick={() => {
+              updateIndex(-1);
+            }}
+          >
+            Prev
+          </button>
+          <button
+            className="bg-white text-black rounded-lg px-2 hover:cursor-pointer hover:bg-gray-200 disabled:opacity-50"
+            disabled={idx + 1 == groupPath.length}
+            onClick={() => {
+              updateIndex(1);
+            }}
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};