diff --git a/src/examples/Button/ThreeWayToggle/index.tsx b/src/examples/Button/ThreeWayToggle/index.tsx new file mode 100644 index 00000000..cfe3803e --- /dev/null +++ b/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 ( + <> + + + ); + case "graph": + // Add the graph component here + return (

Not Available

); + case "arc": + // Add the arc component here + return (

Not Available

); + default: + return null; +} +} +export default function ThreeWayToggleButton({filteredCveReport, filterName, handleFilterByName}: any) { + const [view, setView] = React.useState('table'); + + const handleChange = ( + event: React.MouseEvent, + newView: string, + ) => { + setView(newView); + }; + + + return ( + <> + + Table + Graph + Arc + + {switchView(view, filteredCveReport, filterName, handleFilterByName)} + + ); +} + diff --git a/src/pages/ModelOfInterest/ModelDisplay/index.tsx b/src/pages/ModelOfInterest/ModelDisplay/index.tsx index 2a00a3c2..9c3e57ec 100644 --- a/src/pages/ModelOfInterest/ModelDisplay/index.tsx +++ b/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 ( <> - - + + ); } diff --git a/src/pages/ModelOfInterest/index.tsx b/src/pages/ModelOfInterest/index.tsx index 13640f81..0cffb952 100644 --- a/src/pages/ModelOfInterest/index.tsx +++ b/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>, + setRiskAnalysis: React.Dispatch>, + 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 ( <> + + + + + {/* */} + + + Model Count + + + {count} + + + {/* */} + + + + + + {/* Calling Language component for showing model type */} + + + + + + + + + + + diff --git a/src/pages/VulnerabilityOfInterest/VoiTable/SearchVoiList.tsx b/src/pages/VulnerabilityOfInterest/VoiTable/SearchVoiList.tsx index 04f37c63..dd5ba2e7 100644 --- a/src/pages/VulnerabilityOfInterest/VoiTable/SearchVoiList.tsx +++ b/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 ( - - + +