Skip to content

Diff modal for Matched text & Rule text in Matches table #577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
OmkarPh merged 13 commits into from
Jun 19, 2023
Merged

Diff modal for Matched text & Rule text in Matches table #577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5c2bca4
Implemented matched text diff with rule text, resolves #561
OmkarPh Jun 4, 2023
b004b78
Hide matched text, if --license-text is disabled in the scan
OmkarPh Jun 4, 2023
aececb5
Changed to punctuation & space insensitive diff implementation
OmkarPh Jun 6, 2023
d8605d7
Fixed inconsistent linebreak resolution in diff
OmkarPh Jun 8, 2023
d2713ec
Fixed overflowing lines & completed UI for diff text
OmkarPh Jun 8, 2023
76e91fd
Fallback for Unresolved rule-reference & finalised match diff viewer
OmkarPh Jun 11, 2023
c45e696
Rollback to default route on import
OmkarPh Jun 12, 2023
f5bfb56
Merge branch 'v4.0-react-typescript' into feature/matched_text
OmkarPh Jun 12, 2023
d10366c
Removed unused deps
OmkarPh Jun 12, 2023
3437025
Handled synthetic rules & availability of rule and match texts
OmkarPh Jun 16, 2023
1767286
Fixed empty space diffs around newlines
OmkarPh Jun 16, 2023
75e56ef
Fixed incorrect diffs surrounding symbols and newlines
OmkarPh Jun 17, 2023
fe48142
Fixed diff styling
OmkarPh Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 36 additions & 20 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
36 changes: 25 additions & 11 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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');
}


Expand All @@ -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;
Expand Down
29 changes: 2 additions & 27 deletions src/components/FileTree/FileTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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]);
Expand All @@ -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);
Expand Down Expand Up @@ -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
Expand All @@ -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);
}
}}
Expand Down
Loading