Added filter for MOI (#583)

src/assets/theme/components/tabs/index.tsx

@@ -21,7 +21,7 @@ export default {
     flexContainer: {
       height: "100%",
       position: "relative",
-      zIndex: 10,
+      zIndex: 1,
     },
 
     fixed: {

src/examples/Navbars/DefaultNavbar/index.tsx

@@ -552,7 +552,7 @@ function DefaultNavbar({
             display={{ xs: "inline-block", lg: "none" }}
             lineHeight={0}
             py={1.5}
-            pl={1.5}
+            pl={0}
             color={transparent ? "white" : "inherit"}
             sx={{ cursor: "pointer", position: "absolute" }}
             onClick={openMobileNavbar}

src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx

@@ -148,6 +148,7 @@ export default function ProjectDisplay({ selectedFilter }: any) {
   if (Object.values(filterData).length !== 0) {
     getUSERLIST = filterDataBasedOnUserSelecrtionOnTag(filterData, getUSERLIST);
   }
+
   const handleFilterByName: any = (event: any) => {
     setPage(0);
     setFilterName(event.target.value);

src/pages/BesVersionHistory/AssessmentReport/FetchSastReport.tsx

@@ -8,7 +8,6 @@ const FetchSAST = ({ cqData, sqData }: any): any => {
   let medium: number = 0;
   let low: number = 0;
   let sqissueslen: number = 0;
-  // debugger
   if (sqData && Object.values(sqData).length !== 0) {
     sqissueslen = sqData.length;
   }

src/pages/ModelOfInterest/FilterMoi.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Tabs, { tabsClasses } from "@mui/material/Tabs";
+import { TabForMoi } from "./TabForMoi";
+
+export default function ScrollableTabsButtonVisibleML({
+  filter,
+  setFilter
+}: any) {
+  const [value, setValue] = React.useState(0);
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+  return (
+    <Box
+      sx={{
+        flexGrow: 1,
+        maxWidth: "100%",
+        mx: { xs: 2, lg: 3 }
+      }}
+      pt={1}
+    >
+      <Tabs
+        value={value}
+        onChange={handleChange}
+        variant="scrollable"
+        scrollButtons
+        aria-label="visible arrows tabs example"
+        sx={{
+          [`& .${tabsClasses.scrollButtons}`]: {
+            "&.Mui-disabled": { opacity: 0.3 }
+          },
+          height: "43px"
+        }}
+        style={{ backgroundColor: "white" }}
+      >
+        <TabForMoi filter={filter} setFilter={setFilter} />
+      </Tabs>
+    </Box>
+  );
+}

src/pages/ModelOfInterest/ModelDisplay/index.tsx

@@ -4,6 +4,7 @@ import { modelOfInterestData } from "../../../dataStore";
 import { getComparator } from "../../../layouts/pages/projectOfInterest/ProjectDisplay";
 import { fetchJsonData } from "../../BesVersionHistory/AssessmentReport";
 import ThreeWayToggleButton from "../../../examples/Button/ThreeWayToggle";
+import { modelType, filterCheck, riskAnalysis } from "../filter/references";
 
 function applySortFilter(array: any, comparator: any, query: any) {
   const stabilizedThis = array.map((el: any, index: any) => [el, index]);
@@ -22,18 +23,62 @@ 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) => {
-    setFilterName(event.target.value);
-  };
+function filterDataBasedOnUserSelecrtionOnModelType(
+  modelType: string,
+  getModelLIST: any[]
+): any {
+  const filteredArray = getModelLIST.filter((item) =>
+    item.type.includes(modelType)
+  );
+  return filteredArray;
+}
+
+function filterDataBasedOnUserSelecrtionOnRiskriskAnalysis(
+  riskriskAnalysis: string,
+  getModelLIST: any[]
+): any {
+  if (riskriskAnalysis === "Unanalyzed") {
+    const filteredArray = getModelLIST.filter((item) =>
+      item.quality_control.length === 0
+    );
+    return filteredArray;
+  }
+  const filteredArray = getModelLIST.filter((item) =>
+    item.quality_control.includes(riskriskAnalysis)
+  );
+  return filteredArray;
+}
 
+export default function ModelDisplay({ selectedFilter }: any) {
+  const [filterName, setFilterName] = useState("");
   const [report, setreport]: any = useState([]);
   React.useEffect(() => {
     fetchJsonData(modelOfInterestData, setreport);
   }, []);
+
+  let getModelLIST: any = report;
+  if (selectedFilter?.ModelType && !filterCheck[selectedFilter?.ModelType]) {
+    getModelLIST = filterDataBasedOnUserSelecrtionOnModelType(
+      modelType[selectedFilter?.ModelType],
+      getModelLIST
+    );
+  }
+  if (
+    selectedFilter?.RiskAnalysis &&
+    !filterCheck[selectedFilter?.RiskAnalysis]
+  ) {
+    getModelLIST = filterDataBasedOnUserSelecrtionOnRiskriskAnalysis(
+      riskAnalysis[selectedFilter?.RiskAnalysis],
+      getModelLIST
+    );
+  }
+
+  const handleFilterByName = (event: any) => {
+    setFilterName(event.target.value);
+  };
+
   const filteredCveReport = applySortFilter(
-    report,
+    getModelLIST,
     getComparator("asc", "id"),
     filterName
   );

src/pages/ModelOfInterest/TabForMoi.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import Tab from "@mui/material/Tab";
+import { SecurityDomain } from "./filter/riskAnalysis";
+import { ModelType } from "./filter/ModelType";
+
+export function TabForMoi({ filter, setFilter }: any) {
+  return (
+    <>
+      <Tab
+        style={{
+          margin: "0",
+          padding: "0",
+          backgroundColor: "white",
+          borderRadius: "1",
+          paddingRight: "12px",
+          minWidth: "302px"
+        }}
+        label={<ModelType filter={filter} setFilter={setFilter} />}
+      />
+      <Tab
+        style={{
+          margin: "0",
+          padding: "0",
+          backgroundColor: "white",
+          borderRadius: "1",
+          paddingRight: "12px",
+          minWidth: "302px"
+        }}
+        label={<SecurityDomain filter={filter} setFilter={setFilter} />}
+      />
+    </>
+  );
+}

src/pages/ModelOfInterest/filter/ModelType.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import FormControl from "@mui/material/FormControl";
+import MenuItem from "@mui/material/MenuItem";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import { Theme, useTheme } from "@mui/material/styles";
+
+const names = [
+  "Classic",
+  "LLM"
+];
+
+function getStyles(name: string, personName: readonly string[], theme: Theme) {
+  return {
+    fontWeight:
+      personName.indexOf(name) === -1
+        ? theme.typography.fontWeightRegular
+        : theme.typography.fontWeightMedium
+  };
+}
+
+export function ModelType({ filter, setFilter }: any) {
+  const theme = useTheme();
+  const [personName, setPersonName] = React.useState<string[]>([]);
+  const handleChange1 = (event: SelectChangeEvent<typeof personName>) => {
+    const {
+      target: { value }
+    } = event;
+    setPersonName(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : value
+    );
+  };
+  if (personName?.[0] !== filter.ModelType) {
+    filter.ModelType = personName?.[0];
+    setFilter({ ...filter });
+  }
+  return (
+    <div style={{ width: "100%", backgroundColor: (!personName?.[0] || personName?.[0] === 'Model Type') ? "white" : "lightgreen"  }}>
+      <FormControl sx={{ width: "100%" }}>
+        <Select
+          multiple={false}
+          displayEmpty
+          value={personName}
+          onChange={handleChange1}
+          input={<OutlinedInput />}
+          renderValue={(selected) => {
+            if (selected.length === 0) {
+              return <>Model Type</>;
+            }
+            return selected.join(", ");
+          }}
+          style={{ height: "35px" }}
+        >
+          <MenuItem value="Model Type">
+            <>All</>
+          </MenuItem>
+          {names.map((name) => (
+            <MenuItem
+              key={name}
+              value={name}
+              style={getStyles(name, personName, theme)}
+            >
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}

src/pages/ModelOfInterest/filter/references.ts

@@ -0,0 +1,15 @@
+export const filterCheck = {
+  "Model Type": true,
+  "Risk Analysis": true
+};
+
+export const riskAnalysis = {
+  "SAST": "SAST",
+  "Fuzz Test": "Fuzz Test",
+  "Unanalyzed": "Unanalyzed"
+};
+
+export const modelType = {
+  "Classic": "Classic",
+  "LLM": "LLM"
+};

src/pages/ModelOfInterest/filter/riskAnalysis.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import FormControl from "@mui/material/FormControl";
+import MenuItem from "@mui/material/MenuItem";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import { Theme, useTheme } from "@mui/material/styles";
+// import { selectedFilterData } from "./mapFilterData";
+
+const names = [
+  "SAST",
+  "Fuzz Test",
+  "Unanalyzed"
+];
+
+function getStyles(name: string, personName: readonly string[], theme: Theme) {
+  return {
+    fontWeight:
+      personName.indexOf(name) === -1
+        ? theme.typography.fontWeightRegular
+        : theme.typography.fontWeightMedium
+  };
+}
+
+export function SecurityDomain({ filter, setFilter }: any) {
+  const theme = useTheme();
+  const [personName, setPersonName] = React.useState<string[]>([]);
+  const handleChange1 = (event: SelectChangeEvent<typeof personName>) => {
+    const {
+      target: { value }
+    } = event;
+    setPersonName(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : value
+    );
+  };
+  if (personName?.[0] !== filter.RiskAnalysis) {
+    filter.RiskAnalysis = personName?.[0];
+    setFilter({ ...filter });
+  }
+  return (
+    <div
+      style={{
+        width: "100%",
+        backgroundColor:
+          !personName?.[0] || personName?.[0] === "Risk Analysis"
+            ? "white"
+            : "lightgreen"
+      }}
+    >
+      <FormControl sx={{ width: "100%" }}>
+        <Select
+          multiple={false}
+          displayEmpty
+          value={personName}
+          onChange={handleChange1}
+          input={<OutlinedInput />}
+          renderValue={(selected) => {
+            if (selected.length === 0) {
+              return <>Risk Analysis</>;
+            }
+            return selected.join(", ");
+          }}
+          style={{ height: "35px" }}
+        >
+          <MenuItem value="Risk Analysis">
+            <>All</>
+          </MenuItem>
+          {names.map((name) => (
+            <MenuItem
+              key={name}
+              value={name}
+              style={getStyles(name, personName, theme)}
+            >
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}

src/pages/ModelOfInterest/index.tsx

@@ -14,6 +14,7 @@ import ProjectCount from "../ProjectOfInterest/ProjectCount";
 import Language from "../../examples/Charts/PieChart/Languages";
 import theme from "../../assets/theme";
 import { fetchJsonReport } from "../../utils/fatch_json_report";
+import ScrollableTabsButtonVisibleML from "./FilterMoi";
 
 const fetchModelData = async () => {
   const moidata: any = JSON.parse(await fetchJsonReport(modelOfInterestData));
@@ -74,10 +75,14 @@ function ModelOfInterest() {
   const [modelType, setModelType]: any = useState([]);
   const [riskAnalysis, setRiskAnalysis]: any = useState([]);
 
+  const [filterData, setFilterData]: any = React.useState({
+    ModelType: "",
+    RiskAnalysis: ""
+  });
+
   React.useEffect(() => {
     prepPieChartData(setModelType, setRiskAnalysis, setReport);
   }, []);
-
   return (
     <>
       <DefaultNavbar routes={routes} sticky />
@@ -151,12 +156,16 @@ function ModelOfInterest() {
           </Grid>
         </Grid>
       </MKBox>
+      <ScrollableTabsButtonVisibleML
+        filter={filterData}
+        setFilter={setFilterData}
+      />
       <MKBox pt={2} sx={{ mx: { xs: 2, lg: 3 } }}>
         <Grid container spacing={6}>
           <Grid item xs={12}>
             <Card>
               <MKBox>
-                <ModelDisplay />
+                <ModelDisplay selectedFilter={filterData}/>
               </MKBox>
             </Card>
           </Grid>