Fixed #480

src/examples/Button/ThreeWayToggle/index.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import ModelTable from '../../../pages/ModelOfInterest/ModelDisplay/ModelTable';
+import SearchVoiList from '../../../pages/VulnerabilityOfInterest/VoiTable/SearchVoiList';
+
+function switchView(viewValue:any, filteredCveReport: any, filterName: any, handleFilterByName: any) {
+  switch (viewValue) {
+  case "table":
+    return (
+      <>
+      <SearchVoiList
+      placeholderName="Search model by name"
+      filterName={filterName}
+      onFilterName={handleFilterByName}
+    />
+    <ModelTable data={filteredCveReport} />
+    </>);
+  case "graph":
+    // Add the graph component here
+    return (<p style={{ paddingTop: "10%", justifyContent: "center", display: "flex", paddingBottom: "10%"}}>Not Available</p>);
+  case "arc":
+    // Add the arc component here
+    return (<p style={{ paddingTop: "10%", justifyContent: "center", display: "flex", paddingBottom: "10%"}}>Not Available</p>);
+  default:
+    return null;
+}
+}
+export default function ThreeWayToggleButton({filteredCveReport, filterName, handleFilterByName}: any) {
+  const [view, setView] = React.useState('table');
+
+  const handleChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newView: string,
+  ) => {
+    setView(newView);
+  };
+
+
+  return (
+    <>
+    <ToggleButtonGroup
+      value={view}
+      exclusive
+      onChange={handleChange}
+      aria-label="Platform"
+      style={{ float: 'right', paddingTop: "2%", paddingRight: "1%"}}
+    >
+      <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="table">Table</ToggleButton>
+      <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="graph">Graph</ToggleButton>
+      <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="arc">Arc</ToggleButton>
+    </ToggleButtonGroup>
+    {switchView(view, filteredCveReport, filterName, handleFilterByName)}
+    </>
+  );
+}
+

src/pages/ModelOfInterest/ModelDisplay/index.tsx

@@ -5,7 +5,7 @@ import { getComparator } from "../../../layouts/pages/projectOfInterest/ProjectD
 import { verifyLink } from "../../BesVersionHistory/AssessmentReport";
 import SearchVoiList from "../../VulnerabilityOfInterest/VoiTable/SearchVoiList";
 import ModelTable from "./ModelTable";
-
+import ThreeWayToggleButton from "../../../examples/Button/ThreeWayToggle"
 function applySortFilter(array: any, comparator: any, query: any) {
   const stabilizedThis = array.map((el: any, index: any) => [el, index]);
   stabilizedThis.sort((a: any, b: any) => {
@@ -22,6 +22,9 @@ function applySortFilter(array: any, comparator: any, query: any) {
   return stabilizedThis.map((el: any) => el[0]);
 }
 
+
+
+
 export default function ModelDisplay() {
   const [filterName, setFilterName] = useState("");
   const handleFilterByName = (event: any) => {
@@ -37,15 +40,10 @@ export default function ModelDisplay() {
     getComparator("asc", "id"),
     filterName
   );
-
   return (
     <>
-      <SearchVoiList
-        placeholderName="Search model by name"
-        filterName={filterName}
-        onFilterName={handleFilterByName}
-      />
-      <ModelTable data={filteredCveReport} />
+
+      <ThreeWayToggleButton filteredCveReport={filteredCveReport} filterName={filterName} handleFilterByName={handleFilterByName}/>
     </>
   );
 }

src/pages/ModelOfInterest/index.tsx

@@ -6,12 +6,156 @@ import DefaultNavbar from "../../examples/Navbars/DefaultNavbar";
 import MKBox from "../../components/MKBox";
 import routes from "../../routes";
 import ModelDisplay from "./ModelDisplay";
+import MKTypography from "../../components/MKTypography";
+import { useState } from "react";
+import { verifyLink } from "../ShowModelDetails/AssessmentSummary";
+import { modelOfInterestData } from "../../dataStore";
+import Language from "../../examples/Charts/PieChart/Languages";
+import theme from "../../assets/theme";
+import { debug } from "console";
+import ThreeWayToggle from "../../examples/Button/ThreeWayToggle"
+function prepPieChartData(
+  setModelType: React.Dispatch<React.SetStateAction<never[]>>,
+  setRiskAnalysis: React.Dispatch<React.SetStateAction<never[]>>,
+  cache: any,
+  data: any
+) {
+  const modelTypePieData: any = [];
+  const modelTypeCount: any = {};
+  const riskAnalysisPieData: any = [];
+  const riskAnalysisCount: any = {};
+
+  data.forEach((item: any) => {
+    if (!modelTypeCount[item["type"]]) {
+      modelTypeCount[item["type"]] = 0;
+    }
+    modelTypeCount[item["type"]]++;
+
+    // Check for the existence of quality_control
+    if (item["quality_control"]) {
+      if (item["quality_control"].length === 0) {
+        // Handling for empty quality_control
+        if (!riskAnalysisCount["Unanalyzed"]) {
+          riskAnalysisCount["Unanalyzed"] = 0;
+        }
+        riskAnalysisCount["Unanalyzed"]++;
+      } else {
+        item["quality_control"].forEach((qc: string) => {
+          if (!riskAnalysisCount[qc]) {
+            riskAnalysisCount[qc] = 0;
+          }
+          riskAnalysisCount[qc]++;
+        });
+      }
+    }
+  });
+
+  for (let model of Object.keys(modelTypeCount)) {
+    modelTypePieData.push({ label: model, value: modelTypeCount[model] });
+  }
+
+  for (let risk of Object.keys(riskAnalysisCount)) {
+    riskAnalysisPieData.push({ label: risk, value: riskAnalysisCount[risk] });
+  }
+
+  setModelType(modelTypePieData);
+  setRiskAnalysis(riskAnalysisPieData);
+}
+
+
 
 function ModelOfInterest() {
+  const [report, setreport]: any = useState([]);
+  const [modelType, setModelType]: any = useState([]);
+  const [riskAnalysis, setRiskAnalysis]: any = useState([]);
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const fetchedReport = await verifyLink(modelOfInterestData, setreport);
+      } catch (error) {
+        // Handle error
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  React.useEffect(() => {
+    if (report.length > 0) {
+      prepPieChartData(setModelType, setRiskAnalysis, [], report);
+    }
+  }, [report, setModelType, setRiskAnalysis]);
+
+  const count = report.length;
+
   return (
     <>
       <DefaultNavbar routes={routes} sticky />
       <MKBox pt={14} sx={{ mx: { xs: 2, lg: 3 } }}>
+        <Grid container spacing={3}>
+          <Grid item style={{ width: "33.3%" }}>
+            <MKBox mb={3} style={{ height: "20%" }}>
+              <Card sx={{ height: "470%" }}>
+                {/* <MKBox> */}
+                <MKBox pt={1} pb={1} px={1}>
+                <MKTypography
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  variant="h5"
+                  textTransform="capitalize"
+
+                >
+                  Model Count
+                </MKTypography>
+                <MKTypography
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  variant="h5"
+                  textTransform="capitalize"
+                  style={{ fontSize: "120px", paddingTop: "12%" }}
+
+                >
+                  {count}
+                </MKTypography>
+                </MKBox>
+                {/* </MKBox> */}
+              </Card>
+            </MKBox>
+          </Grid>
+          <Grid item style={{ width: "33.3%" }}>
+            <MKBox mb={3}>
+              {/* Calling Language component for showing model type */}
+              <Language
+                title="Model Type"
+                chartData={modelType}
+                chartColors={[
+                  theme.palette.primary.main,
+                  theme.palette.info.main,
+                  theme.palette.warning.main,
+                  theme.palette.error.main,
+                ]}
+              />
+            </MKBox>
+          </Grid>
+          <Grid item style={{ width: "33.3%" }}>
+            <MKBox mb={3}>
+              <Language
+                title="Risk Analysis"
+                chartData={riskAnalysis}
+                chartColors={[
+                  theme.palette.primary.main,
+                  theme.palette.info.main,
+                  theme.palette.warning.main,
+                  theme.palette.error.main,
+                ]}
+              />
+            </MKBox>
+          </Grid>
+        </Grid>
+      </MKBox>
+      <MKBox pt={5} sx={{ mx: { xs: 2, lg: 3 } }}>
         <Grid container spacing={6}>
           <Grid item xs={12}>
             <Card>

src/pages/VulnerabilityOfInterest/VoiTable/SearchVoiList.tsx

@@ -10,7 +10,7 @@ const StyledRoot = styled(Toolbar)(({ theme }) => ({
   height: 96,
   display: "flex",
   justifyContent: "space-between",
-  padding: theme.spacing(0, 0, 0, 0)
+  padding: theme.spacing(0, 0, 0, 0),
 }));
 
 const StyledSearch = styled(OutlinedInput)(({ theme }: any) => ({
@@ -43,13 +43,14 @@ export default function SearchVoiList({
   onFilterName
 }: any) {
   return (
-    <StyledRoot>
-      <StyledSearch
+    <StyledRoot  sx={{ float: "left", display: "flex" }}>
+      <StyledSearch 
+
         value={filterName}
         onChange={onFilterName}
         placeholder={placeholderName}
         startAdornment={
-          <InputAdornment position="start">
+          <InputAdornment position="start"  >
             <Iconify
               icon="eva:search-fill"
               sx={{ color: "text.disabled", width: 20, height: 20 }}