Skip to content

Conversation

shayna-ch
Copy link
Member

Improve similar issues stacktrace diff by changing diff type to lines, and then diffing those lines by word.

Before/After

bffr afterrrrrr

Change to lines

The diff library does not know how to split stacktraces into words effectively, leading to weird formatting like file names and function calls being split up.
image
Changing the diff type to lines preserves the structure of the stack trace when diffing. Then, diffing those split lines by words keeps the structure made with lines but gives a more accurate diff.

processChange

diffFn() returns a list of Change objects whos values have to be put back together to form the stack trace in the UI. To preserve formatting, each change has to only contain one line, or you get multi line highlights like this.
image

Additionally, including newlines can cause spacing issues(below) in the <SplitBody> component so generally they are removed, and lines are broken up instead by the <Line> component.
line_no_formatting

@shayna-ch shayna-ch requested a review from lobsterkatie August 11, 2025 22:50
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Aug 11, 2025
@shayna-ch shayna-ch marked this pull request as ready for review August 11, 2025 22:55
@shayna-ch shayna-ch requested a review from a team as a code owner August 11, 2025 22:55
cursor[bot]

This comment was marked as outdated.

@shayna-ch shayna-ch marked this pull request as draft August 12, 2025 17:00
@shayna-ch shayna-ch force-pushed the shayna-ch/improve-similar-issues-diff-8 branch from 5b4d319 to 8310f11 Compare August 12, 2025 17:00
@shayna-ch shayna-ch marked this pull request as ready for review August 12, 2025 17:01
@shayna-ch shayna-ch requested a review from a team August 14, 2025 17:51
Comment on lines 70 to 86
? (() => {
const leftText = line.reduce(
(acc, result) => (result.added ? acc : acc + result.value),
''
);
const rightText = line.reduce(
(acc, result) => (result.removed ? acc : acc + result.value),
''
);

// Handle edge cases where text might be empty
if (!leftText && !rightText) {
return line; // Return original line if both texts are empty
}

return diffWords(leftText, rightText);
})()
Copy link
Member

@scttcper scttcper Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't use iife, make a small named function somewhere

cursor[bot]

This comment was marked as outdated.

Comment on lines 58 to 82
const processResults = (): Change[][] => {
let currentLine: Change[] = [];
const processedLines: Change[][] = [];
for (const change of results) {
const lines = change.value.split('\n');
for (let i = 0; i < lines.length; i++) {
const lineValue = lines[i];
if (lineValue !== undefined && lineValue !== '') {
currentLine.push({
value: lineValue,
added: change.added,
removed: change.removed,
});
}
if (i < lines.length - 1) {
processedLines.push(currentLine);
currentLine = [];
}
}
}
if (currentLine.length > 0) {
processedLines.push(currentLine);
}
return processedLines;
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets wrap this in useMemo

@shayna-ch shayna-ch merged commit d110b8b into master Aug 15, 2025
45 checks passed
@shayna-ch shayna-ch deleted the shayna-ch/improve-similar-issues-diff-8 branch August 15, 2025 15:06
@github-actions github-actions bot locked and limited conversation to collaborators Aug 31, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants