Merge pull request #577 from nexB/feature/matched_text

Diff modal for Matched text & Rule text in Matches table

Author: OmkarPh

package-lock.json

@@ -38,6 +38,7 @@
     "@svgr/webpack": "^6.4.0",
     "@types/c3": "^0.7.8",
     "@types/d3": "^7.4.0",
+    "@types/diff-match-patch": "^1.0.32",
     "@types/jquery": "^3.5.14",
     "@types/node": "^18.8.0",
     "@types/react": "^18.0.21",
@@ -85,6 +86,8 @@
     "aws-sdk": "^2.1358.0",
     "bootstrap": "^5.2.1",
     "c3": "^0.7.20",
+    "chart.js": "^4.3.0",
+    "diff-match-patch": "^1.0.5",
     "electron-squirrel-startup": "^1.0.0",
     "file-loader": "^6.2.0",
     "font-awesome": "^4.7.0",
@@ -94,13 +97,12 @@
     "mock-aws-s3": "^4.0.2",
     "moment": "^2.29.4",
     "nock": "^13.3.0",
-    "packageurl-js": "^1.0.0",
     "pg": "^8.10.0",
     "pg-hstore": "^2.3.4",
     "rc-tree": "^5.7.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
-    "react-chartjs-2": "^4.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^5.3.4",
     "react-pro-sidebar": "^0.7.1",
@@ -110,8 +112,6 @@
     "react-tooltip": "^5.10.4",
     "sequelize": "^6.23.2",
     "sequelize-cli": "^6.5.1",
-    "spdx-correct": "^3.1.1",
-    "spdx-license-ids": "^3.0.12",
     "sqlite3": "^5.1.6",
     "url": "^0.11.0",
     "url-loader": "^4.1.1",

package.json

@@ -7,18 +7,30 @@ body {
   width: 100%;
   position: absolute;
 }
-a, a:not([href]), a:not([href]):not([class]) {
+
+a,
+a:not([href]),
+a:not([href]):not([class]) {
   color: #0d6efd;
   cursor: pointer;
   text-decoration: none;
 }
-a:hover, a:not([href]):hover, a:not([href]):not([class]):hover {
+
+a:hover,
+a:not([href]):hover,
+a:not([href]):not([class]):hover {
   color: #0a58ca;
 }
+
+button:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
 img {
-	-webkit-user-select: none;
-	-webkit-user-drag: none;
-	-webkit-app-region: no-drag;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-app-region: no-drag;
   user-select: none;
 }
 
@@ -32,7 +44,7 @@ img {
   font-weight: 400;
   src: url('./lib/css/fonts/Raleway-Regular.ttf');
   src: local('?'),
-          url('./lib/css/fonts/Raleway-Regular.ttf') format('truetype');
+    url('./lib/css/fonts/Raleway-Regular.ttf') format('truetype');
 }
 
 @font-face {
@@ -41,7 +53,7 @@ img {
   font-weight: 800;
   src: url('./lib/css/fonts/Raleway-Black.ttf');
   src: local('?'),
-          url('./lib/css/fonts/Raleway-Black.ttf') format('truetype');
+    url('./lib/css/fonts/Raleway-Black.ttf') format('truetype');
 }
 
 @font-face {
@@ -50,7 +62,7 @@ img {
   font-weight: 400;
   src: url('./lib/css/fonts/Lato-Regular.ttf');
   src: local('?'),
-          url('./lib/css/fonts/Lato-Regular.ttf') format('truetype');
+    url('./lib/css/fonts/Lato-Regular.ttf') format('truetype');
 }
 
 
@@ -59,27 +71,29 @@ img {
   padding: 5px;
   padding-right: 18px;
 }
+
 .card {
   border-radius: 2px;
   box-shadow: 1px 0 8px -3px #b1b1b1;
   background-color: #FFFFFF;
   margin-bottom: 30px;
 }
+
 img {
   -webkit-user-drag: none;
 }
 
-.card > .content {
+.card>.content {
   text-align: center;
   padding: 15px 15px 0;
 }
 
-.card > .header {
+.card>.header {
   text-align: center;
   padding: 15px 15px;
 }
 
-.card > .value {
+.card>.value {
   margin: 0;
   margin-left: auto;
   margin-right: auto;

src/app.css

@@ -1,13 +1,12 @@
 import RcTree from "rc-tree";
 import { DataNode, Key } from "rc-tree/lib/interface";
 import React, { useEffect, useState } from "react";
-import { Element, scroller } from "react-scroll";
+import { Element } from "react-scroll";
 
 import EllipticLoader from "../EllipticLoader";
 import { PathType, useWorkbenchDB } from "../../contexts/dbContext";
 
 import SwitcherIcon from "./SwitcherIcon";
-import { scrollToDomElement } from "../../utils/dom";
 
 import "./FileTree.css";
 
@@ -26,29 +25,18 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
 
   useEffect(() => {
     setExpandedKeys((keys) => {
-      console.log(
-        "Adding",
-        currentPath.substring(0, currentPath.lastIndexOf("/")),
-        [...keys, currentPath.substring(0, currentPath.lastIndexOf("/"))]
-      );
       return [...keys, currentPath.substring(0, currentPath.lastIndexOf("/"))];
     });
     if (currentPath.length) {
       setTimeout(() => {
         const targetNode = document.getElementsByName(currentPath)[0];
         if (targetNode) {
-          // scrollToDomElement(targetNode, { yOffset: -50 });
           targetNode.scrollIntoView({
             behavior: "smooth",
             block: "start",
             inline: "start",
           });
         }
-        // scroller.scrollTo(currentPath, {
-        //   duration: 0,
-        //   delay: 30,
-        //   smooth: "easeInOutQuart",
-        // });
       }, 500);
     }
   }, [currentPath]);
@@ -64,13 +52,8 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
         function wrapNode(node: DataNode) {
           const key = String(node.key);
           node.title = (
-            <Element
-              key={key}
-              name={key}
-              className="filetree-node-wrapper"
-            >
+            <Element key={key} name={key} className="filetree-node-wrapper">
               <span>{String(node.title)}</span>
-              {/* <span id={key}>{String(node.title)}</span> */}
             </Element>
           );
           node.children?.forEach(wrapNode);
@@ -98,12 +81,6 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
     );
   }
 
-  // console.log("Filetree", {
-  //   currentPath,
-  //   selectedKeys: [currentPath],
-  //   defaultExpanded: [currentPath.substring(0, currentPath.lastIndexOf("/"))],
-  // });
-
   return (
     <div className="file-tree-container" {...props}>
       <RcTree
@@ -118,10 +95,8 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
             const newKeys = keys.filter(
               (key) => !String(key).startsWith(String(node.key))
             );
-            console.log("On collapse keys", newKeys);
             setExpandedKeys(newKeys);
           } else {
-            console.log("New expanded", keys);
             setExpandedKeys(keys);
           }
         }}