Participant selection

Orbitalize · Sep 11, 2023 · 1bbc0e3 · 1bbc0e3
1 parent c0d7017
commit 1bbc0e3
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 40 deletions.
diff --git a/reports/src/ThemeContext.tsx b/reports/src/ThemeContext.tsx
@@ -6,11 +6,13 @@ import {
   Theme,
   ThemeProvider,
   createTheme,
+  useMediaQuery,
 } from "@mui/material";
 import {
   PropsWithChildren,
   createContext,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from "react";
@@ -29,8 +31,15 @@ export const useTheme = () => useContext(ThemeContext);
 export const CustomThemeProvider = ({
   children,
 }: PropsWithChildren<unknown>) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
   const [mode, setMode] = useState<PaletteMode>("light");
 
+  useEffect(
+    () => setMode(prefersDarkMode ? "dark" : "light"),
+    [prefersDarkMode]
+  );
+
   const theme = useMemo(
     () =>
       createTheme({

diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
@@ -3,29 +3,26 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  AppBar,
   Box,
   Breadcrumbs,
   Chip,
   Dialog,
   DialogContent,
-  IconButton,
   Link,
-  Toolbar,
   Typography,
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import Brightness4Icon from "@mui/icons-material/Brightness4";
-import Brightness7Icon from "@mui/icons-material/Brightness7";
 
 import { Capability, Check, Requirement } from "./capabilityTypes";
 import { useEffect, useState } from "react";
 import { useMatches } from "react-router-dom";
 import { ReactNode } from "react";
-import { useTheme } from "../ThemeContext";
+import { Report } from "./capabilityTypes";
+import { CapabilityTableHeader } from "./CapabilityTableHeader";
 
 type CapabilityTableProps = {
   capability: Capability;
+  report: Report;
 };
 
 export const CheckLabel = ({
@@ -212,14 +209,7 @@ export const CapabilityRows = ({ capability }: { capability: Capability }) => {
     : [];
 
   const allRows = [...requirements, ...childTable];
-  return [
-    <tr>
-      <td rowSpan={allRows.length + 1}>
-        {capability.name} ({capability.participant_id})
-      </td>
-    </tr>,
-    ...allRows,
-  ];
+  return [...allRows];
 };
 
 export const CapabilityDebug = ({ capability }: { capability: Capability }) => {
@@ -247,23 +237,16 @@ function CapabilityBreadcrumbs() {
   return <Breadcrumbs separator="<=">{crumbs}</Breadcrumbs>;
 }
 
-export const CapabilityTable = ({ capability }: CapabilityTableProps) => {
-  const { colorMode, toggleColorMode } = useTheme();
+export const CapabilityTable = ({
+  capability,
+  report,
+}: CapabilityTableProps) => {
   if (!capability) {
     return <span>Capability not found</span>;
   }
   return (
     <>
-      <AppBar position="fixed">
-        <Toolbar>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            InterUSS report explorer
-          </Typography>
-          <IconButton sx={{ ml: 1 }} onClick={toggleColorMode} color="inherit">
-            {colorMode === "dark" ? <Brightness7Icon /> : <Brightness4Icon />}
-          </IconButton>
-        </Toolbar>
-      </AppBar>
+      <CapabilityTableHeader capability={capability} report={report} />
       <Box
         component="main"
         sx={{
@@ -283,7 +266,6 @@ export const CapabilityTable = ({ capability }: CapabilityTableProps) => {
         <table>
           <thead>
             <tr>
-              <th>Capability</th>
               <th>Requirement</th>
               <th>Test Check</th>
             </tr>

diff --git a/reports/src/capability/CapabilityTableHeader.tsx b/reports/src/capability/CapabilityTableHeader.tsx
@@ -0,0 +1,96 @@
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  IconButton,
+  SelectChangeEvent,
+} from "@mui/material";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { Capability, Report } from "./capabilityTypes";
+import { useTheme } from "../ThemeContext";
+import { useLocation, useNavigate } from "react-router-dom";
+
+type CapabilityTableHeaderProps = {
+  capability: Capability;
+  report: Report;
+};
+
+export const CapabilityTableHeader = ({
+  capability,
+  report,
+}: CapabilityTableHeaderProps) => {
+  const { colorMode, toggleColorMode } = useTheme();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const ussp = parseInt(location.pathname.split("/")[1]) || 0;
+
+  const handleUsspSelect = (event: SelectChangeEvent<number>) => {
+    console.log(event.target.value);
+    const id = event.target.value;
+    navigate(`/${id}`);
+  };
+  return (
+    <AppBar position="fixed" enableColorOnDark>
+      <Toolbar>
+        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          {report.name} - {capability.name}
+        </Typography>
+        <FormControl
+          size="small"
+          sx={(theme) => ({
+            color: theme.palette.primary.contrastText,
+            bgColor: theme.palette.primary.main,
+          })}
+        >
+          <InputLabel
+            id="ussp-select-label"
+            sx={(theme) => ({
+              color: theme.palette.primary.contrastText,
+              "&.Mui-focused": {
+                color: theme.palette.primary.contrastText,
+              },
+            })}
+          >
+            USSP
+          </InputLabel>
+
+          <Select
+            label="USSP"
+            value={ussp}
+            onChange={handleUsspSelect}
+            labelId="ussp-select-label"
+            sx={(theme) => ({
+              color: theme.palette.primary.contrastText,
+              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                borderColor: theme.palette.primary.contrastText,
+              },
+              "&:hover .MuiOutlinedInput-notchedOutline": {
+                borderColor: theme.palette.primary.contrastText,
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderColor: theme.palette.primary.contrastText,
+              },
+              "& .MuiSvgIcon-root": {
+                color: theme.palette.primary.contrastText,
+              },
+            })}
+          >
+            {report.participants?.map((p, i) => (
+              <MenuItem value={i} key={i}>
+                {p}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <IconButton sx={{ ml: 1 }} onClick={toggleColorMode} color="inherit">
+          {colorMode === "dark" ? <Brightness7Icon /> : <Brightness4Icon />}
+        </IconButton>
+      </Toolbar>
+    </AppBar>
+  );
+};
diff --git a/reports/src/capability/capabilityTypes.ts b/reports/src/capability/capabilityTypes.ts
@@ -5,20 +5,20 @@ export type Check = {
   scenario: {
     name: string;
     docUrl: string;
-  }
+  };
   case: {
     name: string;
     docUrl: string;
-  }
+  };
   step: {
     name: string;
     docUrl: string;
-  }
+  };
 
   name: string;
-  result: CheckResult
+  result: CheckResult;
   details: object; // Switch to a JSON path
-}
+};
 
 export type Requirement = {
   name: string;
@@ -35,4 +35,6 @@ export type Capability = {
 
 export type Report = {
   capability: Capability;
+  participants?: string[];
+  name?: string;
 };
diff --git a/reports/src/capability/reportNavigation.tsx b/reports/src/capability/reportNavigation.tsx
@@ -2,6 +2,7 @@ import { Link } from "@mui/material";
 import { Link as RouterLink, RouteObject } from "react-router-dom";
 import { Capability } from "./capabilityTypes";
 import { CapabilityTable } from "./CapabilityTable";
+import { Report } from "./capabilityTypes";
 
 export const joinRoutes = (root: string, child: string): string => {
   const cleanChild = child.replace(/^\/+/g, ""); // remove leading slash
@@ -20,12 +21,18 @@ export const joinRoutes = (root: string, child: string): string => {
 
 export const getNavFromCapability = (
   capability: Capability,
+  report: Report,
   path: string = "/",
   fullPath: string = "/"
 ): RouteObject[] => {
   const children =
     capability.childCapabilities.flatMap((c, i) =>
-      getNavFromCapability(c, `${i}`, joinRoutes(fullPath, i.toString()))
+      getNavFromCapability(
+        c,
+        report,
+        `${i}`,
+        joinRoutes(fullPath, i.toString())
+      )
     ) || [];
   return [
     {
@@ -40,7 +47,7 @@ export const getNavFromCapability = (
       children: [
         {
           index: true,
-          element: <CapabilityTable capability={capability} />,
+          element: <CapabilityTable capability={capability} report={report} />,
         },
         ...children,
       ],

diff --git a/reports/src/capability/reportParser.ts b/reports/src/capability/reportParser.ts
@@ -10,7 +10,7 @@ import {
   ReportsReportTestSuiteActionReport,
   ReportsReportTestSuiteReport,
 } from "../types/TestRunReport";
-import {NotImplementedError} from "../utils/Errors";
+import { NotImplementedError } from "../utils/Errors";
 import {
   Capability,
   Check,
@@ -242,6 +242,10 @@ const parseActions = (
 const _parseReport = (report: ReportsReportTestSuiteActionReport): Report => {
   if (report.test_suite) {
     return {
+      name: report.test_suite.name,
+      participants: report.test_suite.capability_evaluations.map(
+        (c) => c.participant_id
+      ),
       capability: {
         name: "root",
         childCapabilities: parseActions(report),

diff --git a/reports/src/capability/useReport.tsx b/reports/src/capability/useReport.tsx
@@ -22,7 +22,9 @@ export const useReport = ({
 }: UseReportProps): UseReportReturn => {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string>();
-  const [report, setReport] = useState<ReportsReportTestRunReport | undefined>(_report);
+  const [report, setReport] = useState<ReportsReportTestRunReport | undefined>(
+    _report
+  );
 
   useEffect(() => {
     if (_report) {
@@ -35,11 +37,10 @@ export const useReport = ({
       try {
         const res = await fetch(reportUrl);
         if (res.status === 404) {
-          throw new Error("Report not found")
+          throw new Error("Report not found");
         }
         const json = await res.json();
         setReport(json as ReportsReportTestRunReport);
-
       } catch (err) {
         console.error(err);
         setError(JSON.stringify(err));
@@ -55,8 +56,11 @@ export const useReport = ({
     [report]
   );
   const nav = useMemo(
-    () => (parsedReport ? getNavFromCapability(parsedReport.capability) : []),
+    () =>
+      parsedReport
+        ? getNavFromCapability(parsedReport.capability, parsedReport)
+        : [],
     [parsedReport]
   );
-  return {loading, error, report, nav};
+  return { loading, error, report, nav };
 };