Compare Models (#734)

* Compare Models

Author: sudhirverma

.eslintrc.js

@@ -36,11 +36,7 @@ module.exports = {
     '@typescript-eslint/require-array-sort-compare': ['error', {
       ignoreStringArrays: true
     }],
-    'react/jsx-curly-spacing': ['error', {
-      when: 'always',
-      allowMultiline: true,
-      children: true
-    }],
+    'react/jsx-curly-spacing': 'off',
     'eol-last': ['error', 'always'],
     'no-multiple-empty-lines': 'error',
     semi: ['error', 'always'],

package-lock.json

@@ -26,7 +26,7 @@
     "d3": "^7.8.5",
     "gh-pages": "^5.0.0",
     "jest": "^29.7.0",
-    "jspdf": "^3.0.3",
+    "jspdf": "^4.0.0",
     "jspdf-autotable": "^5.0.2",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
@@ -35,7 +35,7 @@
     "react-countup": "^6.5.0",
     "react-dom": "^18.2.0",
     "react-leader-line": "^1.0.5",
-    "react-router-dom": "6.10.0",
+    "react-router-dom": "^6.30.3",
     "react-scripts": "^5.0.1",
     "recharts": "^2.15.1",
     "simplebar-react": "^3.2.4",

package.json

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import ToggleButton from '@mui/material/ToggleButton';
+import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
+
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ModelTable from '../../../pages/ModelOfInterest/ModelDisplay/ModelTable';
 import SearchVoiList from '../../../pages/VulnerabilityOfInterest/VoiTable/SearchVoiList';
@@ -8,6 +10,8 @@ import graphIcon from "../../../assets/images/data-flow.png";
 import tableIcon from "../../../assets/images/cells.png";
 import arcIcon from "../../../assets/images/arc.png";
 import ArcDiagram from '../../../pages/ModelOfInterest/ArcDiagram';
+import { Button } from '@mui/material';
+import CompareModelsModal from '../../../pages/ShowModelDetails/CompareModelsModal';
 
 function switchView(viewValue: any, filteredCveReport: any, filterName: any, handleFilterByName: any) {
   switch (viewValue) {
@@ -16,10 +20,10 @@ function switchView(viewValue: any, filteredCveReport: any, filterName: any, han
       <>
         <SearchVoiList
           placeholderName="Search model by name"
-          filterName={ filterName }
-          onFilterName={ handleFilterByName }
+          filterName={filterName}
+          onFilterName={handleFilterByName}
         />
-        <ModelTable data={ filteredCveReport } />
+        <ModelTable data={filteredCveReport} />
       </>
     );
   case "graph":
@@ -39,6 +43,7 @@ function switchView(viewValue: any, filteredCveReport: any, filterName: any, han
 
 export default function ThreeWayToggleButton({ filteredCveReport, filterName, handleFilterByName }: any) {
   const [view, setView] = React.useState('table');
+  const [openCompare, setOpenCompare] = React.useState(false);
 
   const handleChange = (
     event: React.MouseEvent<HTMLElement>,
@@ -50,17 +55,45 @@ export default function ThreeWayToggleButton({ filteredCveReport, filterName, ha
   return (
     <>
       <ToggleButtonGroup
-        value={ view }
+        value={view}
         exclusive
-        onChange={ handleChange }
+        onChange={handleChange}
         aria-label="Platform"
-        style={ { float: 'right', paddingTop: "2%", paddingRight: "1%" } }
+        style={{ float: 'right', paddingTop: "2%", paddingRight: "1%" }}
       >
-        <ToggleButton style={ { color: "black", fontWeight: "bold" } } value="table" title='Table view of models'><img alt='' style={ { display: "block", width: "17px" } } src={ tableIcon } /></ToggleButton>
-        <ToggleButton style={ { color: "black", fontWeight: "bold" } } value="graph" title='Force directed graph that show the models and its dependencies'><img alt='' style={ { display: "block", width: "17px" } } src={ graphIcon } /></ToggleButton>
-        <ToggleButton style={ { color: "black", fontWeight: "bold" } } value="arc" title='Arc graph that shows the dependencies between models, vulnerabilities and projects'><img alt='' style={ { display: "block", width: "17px" } } src={ arcIcon } /></ToggleButton>
+        <Button
+          variant="contained"
+          size="small"
+          startIcon={<CompareArrowsIcon />}
+          onClick={() => setOpenCompare(true)}
+          sx={{
+            backgroundColor: "#1976d2",
+            color: "#ffffff",
+            textTransform: "none",
+            fontWeight: 600,
+            mr: 1,
+            "&:hover": {
+              backgroundColor: "#1565c0"
+            }
+          }}
+        >
+          Compare Models
+        </Button>
+
+        <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="table" title='Table view of models'><img alt='' style={{ display: "block", width: "17px" }} src={tableIcon} /></ToggleButton>
+        <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="graph" title='Force directed graph that show the models and its dependencies'><img alt='' style={{ display: "block", width: "17px" }} src={graphIcon} /></ToggleButton>
+        <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="arc" title='Arc graph that shows the dependencies between models, vulnerabilities and projects'><img alt='' style={{ display: "block", width: "17px" }} src={arcIcon} /></ToggleButton>
       </ToggleButtonGroup>
-      { switchView(view, filteredCveReport, filterName, handleFilterByName) }
+
+      { /* Views */}
+      {switchView(view, filteredCveReport, filterName, handleFilterByName)}
+
+      { /* Compare modal */}
+      <CompareModelsModal
+        open={openCompare}
+        onClose={() => setOpenCompare(false)}
+        models={filteredCveReport}
+      />
     </>
   );
 }

src/components/Button/ThreeWayToggle/index.tsx

@@ -34,6 +34,7 @@ function filterDataBasedOnUserSelecrtionOnRiskriskAnalysis(
 export default function ModelDisplay({ selectedFilter }: any) {
   const [filterName, setFilterName] = useState("");
   const [report, setreport]: any = useState([]);
+
   React.useEffect(() => {
     fetchJsonData(modelOfInterestData, setreport);
   }, []);
@@ -45,6 +46,7 @@ export default function ModelDisplay({ selectedFilter }: any) {
       getModelLIST
     );
   }
+
   if (
     selectedFilter?.RiskAnalysis &&
     !filterCheck[selectedFilter?.RiskAnalysis]
@@ -64,6 +66,7 @@ export default function ModelDisplay({ selectedFilter }: any) {
     getComparator("asc", "id"),
     filterName
   );
+
   return (
     <ThreeWayToggleButton
       filteredCveReport={ filteredCveReport }

src/pages/ModelOfInterest/ModelDisplay/index.tsx

@@ -83,6 +83,7 @@ function ModelOfInterest() {
   React.useEffect(() => {
     prepPieChartData(setModelType, setRiskAnalysis, setReport);
   }, []);
+
   return (
     <>
       <DefaultNavbar routes={ routes } sticky />