Skip to content

Commit 75e56ef

Browse files
OmkarPhOmkarPh
committed
Fixed incorrect diffs surrounding symbols and newlines
Signed-off-by: Omkar Phansopkar <[email protected]>
1 parent 1767286 commit 75e56ef

File tree

7 files changed

+132
-109
lines changed

7 files changed

+132
-109
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"@svgr/webpack": "^6.4.0",
3939
"@types/c3": "^0.7.8",
4040
"@types/d3": "^7.4.0",
41-
"@types/diff": "^5.0.3",
41+
"@types/diff-match-patch": "^1.0.32",
4242
"@types/jquery": "^3.5.14",
4343
"@types/node": "^18.8.0",
4444
"@types/react": "^18.0.21",
@@ -87,7 +87,7 @@
8787
"bootstrap": "^5.2.1",
8888
"c3": "^0.7.20",
8989
"chart.js": "^4.3.0",
90-
"diff": "^5.1.0",
90+
"diff-match-patch": "^1.0.5",
9191
"electron-squirrel-startup": "^1.0.0",
9292
"file-loader": "^6.2.0",
9393
"font-awesome": "^4.7.0",
@@ -97,7 +97,6 @@
9797
"mock-aws-s3": "^4.0.2",
9898
"moment": "^2.29.4",
9999
"nock": "^13.3.0",
100-
"packageurl-js": "^1.0.0",
101100
"pg": "^8.10.0",
102101
"pg-hstore": "^2.3.4",
103102
"rc-tree": "^5.7.0",

‎src/app.css‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,30 @@ body {
77
width: 100%;
88
position: absolute;
99
}
10-
a, a:not([href]), a:not([href]):not([class]) {
10+
11+
a,
12+
a:not([href]),
13+
a:not([href]):not([class]) {
1114
color: #0d6efd;
1215
cursor: pointer;
1316
text-decoration: none;
1417
}
15-
a:hover, a:not([href]):hover, a:not([href]):not([class]):hover {
18+
19+
a:hover,
20+
a:not([href]):hover,
21+
a:not([href]):not([class]):hover {
1622
color: #0a58ca;
1723
}
24+
25+
button:focus:not(:focus-visible) {
26+
outline: none;
27+
box-shadow: none;
28+
}
29+
1830
img {
19-
-webkit-user-select: none;
20-
-webkit-user-drag: none;
21-
-webkit-app-region: no-drag;
31+
-webkit-user-select: none;
32+
-webkit-user-drag: none;
33+
-webkit-app-region: no-drag;
2234
user-select: none;
2335
}
2436

@@ -32,7 +44,7 @@ img {
3244
font-weight: 400;
3345
src: url('./lib/css/fonts/Raleway-Regular.ttf');
3446
src: local('?'),
35-
url('./lib/css/fonts/Raleway-Regular.ttf') format('truetype');
47+
url('./lib/css/fonts/Raleway-Regular.ttf') format('truetype');
3648
}
3749

3850
@font-face {
@@ -41,7 +53,7 @@ img {
4153
font-weight: 800;
4254
src: url('./lib/css/fonts/Raleway-Black.ttf');
4355
src: local('?'),
44-
url('./lib/css/fonts/Raleway-Black.ttf') format('truetype');
56+
url('./lib/css/fonts/Raleway-Black.ttf') format('truetype');
4557
}
4658

4759
@font-face {
@@ -50,7 +62,7 @@ img {
5062
font-weight: 400;
5163
src: url('./lib/css/fonts/Lato-Regular.ttf');
5264
src: local('?'),
53-
url('./lib/css/fonts/Lato-Regular.ttf') format('truetype');
65+
url('./lib/css/fonts/Lato-Regular.ttf') format('truetype');
5466
}
5567

5668

@@ -59,27 +71,29 @@ img {
5971
padding: 5px;
6072
padding-right: 18px;
6173
}
74+
6275
.card {
6376
border-radius: 2px;
6477
box-shadow: 1px 0 8px -3px #b1b1b1;
6578
background-color: #FFFFFF;
6679
margin-bottom: 30px;
6780
}
81+
6882
img {
6983
-webkit-user-drag: none;
7084
}
7185

72-
.card > .content {
86+
.card>.content {
7387
text-align: center;
7488
padding: 15px 15px 0;
7589
}
7690

77-
.card > .header {
91+
.card>.header {
7892
text-align: center;
7993
padding: 15px 15px;
8094
}
8195

82-
.card > .value {
96+
.card>.value {
8397
margin: 0;
8498
margin-left: auto;
8599
margin-right: auto;

‎src/components/LicenseEntity/MatchedTextContext.tsx‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { diffWords, Change } from "diff";
21
import { Alert, Col, Modal, Row } from "react-bootstrap";
32
import { TailSpin } from "react-loader-spinner";
43
import React, { createContext, useContext, useEffect, useState } from "react";
54

65
import { useWorkbenchDB } from "../../contexts/dbContext";
76
import {
8-
BelongsText,
9-
DiffInfo,
10-
categorizeDiffs,
7+
BelongsIndicator,
8+
DiffComponents,
9+
diffStrings,
1110
normalizeAndSplitDiffIntoLines,
1211
} from "../../utils/text";
1312
import { ScanOptionKeys } from "../../utils/parsers";
@@ -42,10 +41,12 @@ export const MatchedTextProvider = (
4241
) => {
4342
const { db, scanInfo } = useWorkbenchDB();
4443
const [showDiffWindow, setShowDiffWindow] = useState(false);
45-
const [ruleDiffLines, setRuleDiffLines] = useState<Change[][] | null>(null);
46-
const [modifiedDiffLines, setModifiedDiffLines] = useState<Change[][] | null>(
44+
const [ruleDiffLines, setRuleDiffLines] = useState<DiffComponents[][] | null>(
4745
null
4846
);
47+
const [modifiedDiffLines, setModifiedDiffLines] = useState<
48+
DiffComponents[][] | null
49+
>(null);
4950
const [matchDetails, setMatchDetails] = useState<{
5051
identifier: string | null;
5152
matched_text: string | null;
@@ -78,26 +79,20 @@ export const MatchedTextProvider = (
7879

7980
const ruleText = ruleRef.getDataValue("text")?.toString({}) || "";
8081
const matchedText = matchDetails.matched_text;
81-
const rawDiffs = diffWords(ruleText, matchedText, {
82-
ignoreCase: true,
83-
ignoreWhitespace: true,
84-
});
85-
86-
const normalizedDiffs: DiffInfo[] = categorizeDiffs(rawDiffs);
8782

83+
const diffs = diffStrings(ruleText, matchedText);
8884
const normalizedRuleTextLines = normalizeAndSplitDiffIntoLines(
89-
normalizedDiffs.filter(
85+
diffs.filter(
9086
(diff) =>
91-
diff.belongsTo === BelongsText.BOTH ||
92-
diff.belongsTo === BelongsText.ORIGINAL
87+
diff.belongsTo === BelongsIndicator.BOTH ||
88+
diff.belongsTo === BelongsIndicator.ORIGINAL
9389
)
9490
);
95-
9691
const normalizedModifiedTextLines = normalizeAndSplitDiffIntoLines(
97-
normalizedDiffs.filter(
92+
diffs.filter(
9893
(diff) =>
99-
diff.belongsTo === BelongsText.BOTH ||
100-
diff.belongsTo === BelongsText.MODIFIED
94+
diff.belongsTo === BelongsIndicator.BOTH ||
95+
diff.belongsTo === BelongsIndicator.MODIFIED
10196
)
10297
);
10398

@@ -188,7 +183,7 @@ export const MatchedTextProvider = (
188183
<>
189184
<h6>Coverage: {matchDetails.coverage} %</h6>
190185
<Row>
191-
<Col sm={12} md={6} className="rule-text-section">
186+
<Col sm={12} md={6}>
192187
<table className="diff-table">
193188
<thead>
194189
<tr>
@@ -203,17 +198,18 @@ export const MatchedTextProvider = (
203198
className="diff-line"
204199
>
205200
<td className="line-content">
206-
<pre className="snippet">
201+
<pre className="line-text">
207202
{diffLine.map((diff, diffIdx) => {
208203
return (
209204
<span
210205
key={diff.value + diffIdx}
211206
className={
212-
"snippet " +
213-
(diff.removed && "removed-snippet")
207+
diff.diffComponent === "removed"
208+
? "removed-snippet"
209+
: ""
214210
}
215211
>
216-
<span>{diff.value}</span>
212+
{diff.value}
217213
</span>
218214
);
219215
})}
@@ -224,7 +220,7 @@ export const MatchedTextProvider = (
224220
</tbody>
225221
</table>
226222
</Col>
227-
<Col sm={12} md={6} className="matched-text-section">
223+
<Col sm={12} md={6}>
228224
<table className="diff-table">
229225
<thead>
230226
<tr>
@@ -242,13 +238,15 @@ export const MatchedTextProvider = (
242238
{matchDetails.start_line + idx}.
243239
</td>
244240
<td className="line-content">
245-
<pre className="snippet">
241+
<pre className="line-text">
246242
{diffLine.map((diff, diffIdx) => {
247243
return (
248244
<span
249245
key={diff.value + diffIdx}
250246
className={
251-
diff.added ? "added-snippet" : ""
247+
diff.diffComponent === "added"
248+
? "added-snippet"
249+
: ""
252250
}
253251
>
254252
{diff.value}

‎src/components/LicenseEntity/licenseEntity.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
margin: 0;
5656
vertical-align: top;
5757
white-space: pre;
58+
overflow-wrap: anywhere;
5859
}
5960

6061
.matched-text-diff-modal .line-number {
@@ -69,7 +70,7 @@
6970
padding-right: 10px;
7071
}
7172

72-
.matched-text-diff-modal .diff-line .line-content .snippet {
73+
.matched-text-diff-modal .diff-line .line-content .line-text {
7374
margin: 0;
7475
display: inline-block;
7576
white-space: pre-wrap;

‎src/pages/Licenses/Licenses.css‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -82,19 +82,4 @@
8282

8383
.license-item:hover {
8484
background-color: rgb(242, 242, 242);
85-
}
86-
87-
88-
/* .expand-package {
89-
display: inline-block;
90-
border-radius: 50%;
91-
}
92-
.expand-package .expanded-icon{
93-
transform: rotate(90deg);
94-
}
95-
.expand-package svg{
96-
transition: transform 300ms ease-in;
97-
}
98-
.expand-package:active, .expand-package:hover {
99-
font-size: 14px;
100-
} */
85+
}

0 commit comments

Comments
 (0)