Skip to content

Fix JSON diff viewer performance issue causing UI freeze with large p… #19

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

Open
sneha0099 wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Fix JSON diff viewer performance issue causing UI freeze with large p… #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bbb0e1a
Fix JSON diff viewer performance issue causing UI freeze with large p…
sneha0099 Sep 2, 2025
6dafcac
change the line format from LF to CRLF
sneha0099 Sep 3, 2025
ed1e0e2
load large payload of 100k lines with the help of virtualization
sneha0099 Sep 8, 2025
2862a80
fix alignment between gutter and row and line number
sneha0099 Sep 9, 2025
c8f76d7
fix: change the threshold value of virtualization
sneha0099 Sep 9, 2025
a526c7a
fix: align the title with diff
sneha0099 Oct 6, 2025
467c5a0
fix: noise mode spacing of lines
sneha0099 Oct 27, 2025
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
2 changes: 1 addition & 1 deletion lib/compute-lines.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,5 +54,5 @@ export interface JsDiffChangeObject {
* @param compareMethod JsDiff method.
* @param linesOffset Starting line number offset.
*/
export declare const computeLineInformation: (oldString: string, newString: string, noise: string[], disableWordDiff?: boolean, compareMethod?: string | ((oldStr: string, newStr: string) => DiffChange[]), linesOffset?: number) => ComputedLineInformation;
export declare const computeLineInformation: (oldString: string, newString: string, noise?: string[], disableWordDiff?: boolean, compareMethod?: string | ((oldStr: string, newStr: string) => DiffChange[]), linesOffset?: number) => ComputedLineInformation;
export {};
173 changes: 77 additions & 96 deletions lib/compute-lines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.computeLineInformation = exports.DiffMethod = exports.DiffType = void 0;
/* eslint-disable space-before-blocks */
/* eslint-disable no-useless-concat */
/* eslint-disable no-lonely-if */
Expand All @@ -18,17 +15,17 @@ exports.computeLineInformation = exports.DiffMethod = exports.DiffType = void 0;
/* eslint-disable no-mixed-spaces-and-tabs */
/* eslint-disable max-len */
// keploy-react-diff
const diff = require("diff");
import * as diff from 'diff';
const jsDiff = diff;
var DiffType;
export var DiffType;
(function (DiffType) {
DiffType[DiffType["DEFAULT"] = 0] = "DEFAULT";
DiffType[DiffType["ADDED"] = 1] = "ADDED";
DiffType[DiffType["REMOVED"] = 2] = "REMOVED";
DiffType[DiffType["NOISED"] = 3] = "NOISED";
})(DiffType = exports.DiffType || (exports.DiffType = {}));
})(DiffType || (DiffType = {}));
// See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
var DiffMethod;
export var DiffMethod;
(function (DiffMethod) {
DiffMethod["CHARS"] = "diffChars";
DiffMethod["WORDS"] = "diffWords";
Expand All @@ -37,7 +34,7 @@ var DiffMethod;
DiffMethod["TRIMMED_LINES"] = "diffTrimmedLines";
DiffMethod["SENTENCES"] = "diffSentences";
DiffMethod["CSS"] = "diffCss";
})(DiffMethod = exports.DiffMethod || (exports.DiffMethod = {}));
})(DiffMethod || (DiffMethod = {}));
/**
* Splits diff text by new line and computes final list of diff lines based on conditions.
*
Expand Down Expand Up @@ -410,80 +407,78 @@ function CompareJSON(expectedStr, actualStr, noise, flattenKeyPath) {
* @param compareMethod JsDiff method.
* @param linesOffset Starting line number offset.
*/
const computeLineInformation = (oldString, newString, noise, disableWordDiff = false, compareMethod = DiffMethod.CHARS, linesOffset = 0) => {
if (noise === null || noise === undefined) {
noise = [];
}
let diffArray;
let validJSON = "plain";
try {
JSON.parse(oldString);
JSON.parse(newString);
validJSON = "JSON";
}
catch (e) {
// fall back to plain text diff if not valid JSON
export const computeLineInformation = (oldString, newString, noise = [], disableWordDiff = false, compareMethod = DiffMethod.CHARS, linesOffset = 0) => {
let diffArray = [];
let isJSON = false;
if ((oldString.startsWith('{') || oldString.startsWith('[')) &&
(newString.startsWith('{') || newString.startsWith('['))) {
try {
JSON.parse(oldString);
JSON.parse(newString);
isJSON = true;
}
catch (_a) {
isJSON = false;
}
}
if (validJSON === 'plain') {
if (noise == null || noise.length == 0 || (noise.length > 0 && !noise.includes("body"))) {
diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), {
if (!isJSON) {
if (!noise.length || (noise.length > 0 && !noise.includes("body"))) {
diffArray = diff.diffLines(oldString.trimEnd(), newString.trimEnd(), {
newlineIsToken: true,
ignoreWhitespace: false,
ignoreCase: false,
});
if (diffArray.length === 1) {
if (diffArray.length === 1)
diffArray[0].count = -1;
}
diffArray.forEach(d => {
if (d.flattenPath === undefined) {
for (const d of diffArray) {
if (d.flattenPath === undefined)
d.flattenPath = "";
}
});
}
}
else {
diffArray = noiseDiffArray(oldString, newString, "", "");
}
}
else {
diffArray = CompareJSON(oldString.trimRight(), newString.trimRight(), noise, "");
diffArray = CompareJSON(oldString.trimEnd(), newString.trimEnd(), noise, "");
}
let rightLineNumber = linesOffset;
let leftLineNumber = linesOffset;
let lineInformation = [];
let counter = 0;
const lineInformation = [];
const diffLines = [];
const ignoreDiffIndexes = [];
const getLineInformation = (value, diffIndex, added, removed, noised, evaluateOnlyFirstLine, LineIndexTobeReturned) => {
const ignoreDiffIndexes = new Set();
const TAG = "_keploy_|_keploy_";
const TAG_LENGTH = TAG.length;
const getLineInformation = (value, diffIndex, added, removed, noised) => {
const lines = constructLines(value);
return lines.map((line, lineIndex) => {
if (ignoreDiffIndexes.includes(`${diffIndex}-${lineIndex}`)
|| (evaluateOnlyFirstLine && lineIndex !== 0) || diffArray[diffIndex].count === -3) {
return undefined;
const result = [];
const diffEntry = diffArray[diffIndex];
const currentFlattenPath = diffEntry.flattenPath || "";
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
if (ignoreDiffIndexes.has(`${diffIndex}-${lineIndex}`) || diffEntry.count === -3) {
continue;
}
const line = lines[lineIndex];
const left = {};
const right = {};
const currentFlattenPath = diffArray[diffIndex].flattenPath || "";
if (added || removed) {
if (!diffLines.includes(counter)) {
if (!diffLines.includes(counter))
diffLines.push(counter);
}
if (removed) {
leftLineNumber += 1;
leftLineNumber++;
left.lineNumber = leftLineNumber;
left.type = DiffType.REMOVED;
left.value = line || ' ';
left.value = line || " ";
left.flattenPath = currentFlattenPath;
const nextDiff = diffArray[diffIndex + 1];
if (nextDiff && nextDiff.added) {
const nextDiffLines = constructLines(nextDiff.value)[lineIndex];
if (lineIndex < constructLines(nextDiff.value).length && lineIndex === lines.length - 1) {
lines.push(' ');
}
if (nextDiffLines) {
if (nextDiff === null || nextDiff === void 0 ? void 0 : nextDiff.added) {
const nextLines = constructLines(nextDiff.value);
if (lineIndex < nextLines.length) {
const nextLineInfo = getLineInformation(nextDiff.value, diffIndex + 1, true, false, nextDiff.noised);
const nextInfo = nextLineInfo[lineIndex];
if (nextInfo && nextInfo.right) {
ignoreDiffIndexes.push(`${diffIndex + 1}-${lineIndex}`);
if (nextInfo === null || nextInfo === void 0 ? void 0 : nextInfo.right) {
ignoreDiffIndexes.add(`${diffIndex + 1}-${lineIndex}`);
right.lineNumber = nextInfo.right.lineNumber;
right.type = nextInfo.right.type;
right.flattenPath = nextDiff.flattenPath || "";
Expand All @@ -492,8 +487,10 @@ const computeLineInformation = (oldString, newString, noise, disableWordDiff = f
}
else {
const computedDiff = computeDiff(line, nextInfo.right.value, compareMethod);
computedDiff.left.forEach(l => { l.flattenPath = currentFlattenPath; });
computedDiff.right.forEach(r => { r.flattenPath = currentFlattenPath; });
for (const l of computedDiff.left)
l.flattenPath = currentFlattenPath;
for (const r of computedDiff.right)
r.flattenPath = currentFlattenPath;
right.value = computedDiff.right;
left.value = computedDiff.left;
}
Expand All @@ -502,63 +499,47 @@ const computeLineInformation = (oldString, newString, noise, disableWordDiff = f
}
}
else {
rightLineNumber += 1;
rightLineNumber++;
right.lineNumber = rightLineNumber;
right.type = DiffType.ADDED;
right.value = line;
right.flattenPath = currentFlattenPath;
}
}
else {
// default lines
if (diffArray[diffIndex].count === -1 || diffArray[diffIndex].count >= 0) {
leftLineNumber += 1;
rightLineNumber += 1;
if (diffEntry.count === -1 || diffEntry.count >= 0) {
leftLineNumber++;
rightLineNumber++;
left.lineNumber = leftLineNumber;
left.type = DiffType.DEFAULT;
right.lineNumber = rightLineNumber;
right.type = DiffType.DEFAULT;
left.value = line;
right.value = line;
left.flattenPath = currentFlattenPath;
right.flattenPath = currentFlattenPath;
if (noised) {
left.type = DiffType.NOISED;
right.type = DiffType.NOISED;
}
left.type = right.type = DiffType.DEFAULT;
left.value = right.value = line;
left.flattenPath = right.flattenPath = currentFlattenPath;
if (noised)
left.type = right.type = DiffType.NOISED;
}
else if (diffArray[diffIndex].count === -2) {
const tagStartIndex = value.indexOf('_keploy_|_keploy_');
const tagLength = '_keploy_|_keploy_'.length;
leftLineNumber += 1;
rightLineNumber += 1;
else if (diffEntry.count === -2) {
const tagStartIndex = value.indexOf(TAG);
leftLineNumber++;
rightLineNumber++;
left.lineNumber = leftLineNumber;
left.type = DiffType.DEFAULT;
right.lineNumber = rightLineNumber;
right.type = DiffType.DEFAULT;
left.type = right.type = DiffType.DEFAULT;
left.value = line.substring(0, tagStartIndex);
right.value = line.substring(tagStartIndex + tagLength);
left.flattenPath = currentFlattenPath;
right.flattenPath = currentFlattenPath;
if (noised) {
left.type = DiffType.NOISED;
right.type = DiffType.NOISED;
}
right.value = line.substring(tagStartIndex + TAG_LENGTH);
left.flattenPath = right.flattenPath = currentFlattenPath;
if (noised)
left.type = right.type = DiffType.NOISED;
}
}
counter += 1;
return { right, left };
}).filter((item) => Boolean(item));
};
diffArray.forEach(({ added, removed, value, noised, flattenPath }, index) => {
lineInformation = [
...lineInformation,
...getLineInformation(value, index, added, removed, noised),
];
});
return {
lineInformation,
diffLines,
counter++;
result.push({ left, right });
}
return result;
};
for (let i = 0; i < diffArray.length; i++) {
const { added, removed, value, noised } = diffArray[i];
lineInformation.push(...getLineInformation(value, i, added, removed, noised));
}
return { lineInformation, diffLines };
};
exports.computeLineInformation = computeLineInformation;
19 changes: 19 additions & 0 deletions lib/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,19 @@ export interface ReactDiffViewerProps {
useDarkTheme?: boolean;
leftTitle?: string | JSX.Element;
rightTitle?: string | JSX.Element;
enableVirtualization?: boolean;
virtualizedHeight?: number;
}
export interface ReactDiffViewerState {
expandedBlocks?: number[];
}
declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
private styles;
private listRef;
private itemHeights;
private lineInformation;
private processedLines;
private lastContainerWidth;
static defaultProps: ReactDiffViewerProps;
static propTypes: {
oldValue: PropTypes.Validator<string>;
Expand All @@ -60,14 +67,26 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
leftTitle: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike>>;
rightTitle: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike>>;
linesOffset: PropTypes.Requireable<number>;
enableVirtualization: PropTypes.Requireable<boolean>;
virtualizedHeight: PropTypes.Requireable<number>;
};
constructor(props: ReactDiffViewerProps);
componentDidUpdate(prevProps: ReactDiffViewerProps): void;
resetCodeBlocks: () => boolean;
private onBlockExpand;
private computeStyles;
private onLineNumberClickProxy;
private renderWordDiff;
private renderLine;
private getRowHeight;
private setRowHeight;
private clearHeightsOnWidthChange;
private VirtualizedRow;
private renderSplitViewRow;
private renderInlineViewRow;
private renderVirtualizedDiff;
private renderInternalVirtualizedDiff;
private renderMinimapOptimizedDiff;
private renderSplitView;
renderInlineView: ({ left, right }: LineInformation, index: number) => JSX.Element;
private onBlockClickProxy;
Expand Down
Loading
Loading