React diff viewer changes to mark noise

keploy · Jun 4, 2024 · 8ef5209 · 8ef5209
1 parent 2e2d4e9
commit 8ef5209
Show file tree

Hide file tree

Showing 8 changed files with 271 additions and 286 deletions.
diff --git a/lib/compute-lines.d.ts b/lib/compute-lines.d.ts
@@ -2,7 +2,8 @@ import * as diff from 'diff';
 export declare enum DiffType {
     DEFAULT = 0,
     ADDED = 1,
-    REMOVED = 2
+    REMOVED = 2,
+    NOISED = 3
 }
 export declare enum DiffMethod {
     CHARS = "diffChars",
@@ -26,6 +27,9 @@ export interface ComputedLineInformation {
     lineInformation: LineInformation[];
     diffLines: number[];
 }
+interface DiffChange extends diff.Change {
+    noised?: boolean;
+}
 export interface ComputedDiffInformation {
     left?: DiffInformation[];
     right?: DiffInformation[];
@@ -34,6 +38,7 @@ export interface JsDiffChangeObject {
     added?: boolean;
     removed?: boolean;
     value?: string;
+    noised?: boolean;
 }
 /**
  * [TODO]: Think about moving common left and right value assignment to a
@@ -49,5 +54,5 @@ export interface JsDiffChangeObject {
  * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
  * @param linesOffset line number to start counting from
  */
-declare const computeLineInformation: (oldString: string, newString: string, noise: string[], disableWordDiff?: boolean, compareMethod?: string | ((oldStr: string, newStr: string) => diff.Change[]), linesOffset?: number) => ComputedLineInformation;
+declare const computeLineInformation: (oldString: string, newString: string, noise: string[], disableWordDiff?: boolean, compareMethod?: string | ((oldStr: string, newStr: string) => DiffChange[]), linesOffset?: number) => ComputedLineInformation;
 export { computeLineInformation };
diff --git a/lib/compute-lines.js b/lib/compute-lines.js
diff --git a/lib/index.js b/lib/index.js
@@ -71,6 +71,7 @@ class DiffViewer extends React.Component {
                 return (React.createElement("span", { key: i, className: cn(this.styles.wordDiff, {
                         [this.styles.wordAdded]: wordDiff.type === compute_lines_1.DiffType.ADDED,
                         [this.styles.wordRemoved]: wordDiff.type === compute_lines_1.DiffType.REMOVED,
+                        [this.styles.wordNoised]: wordDiff.type === compute_lines_1.DiffType.NOISED,
                     }) }, renderer ? renderer(wordDiff.value) : wordDiff.value));
             });
         };
@@ -94,6 +95,7 @@ class DiffViewer extends React.Component {
                 this.props.highlightLines.includes(additionalLineNumberTemplate);
             const added = type === compute_lines_1.DiffType.ADDED;
             const removed = type === compute_lines_1.DiffType.REMOVED;
+            const noised = type === compute_lines_1.DiffType.NOISED;
             let content;
             if (Array.isArray(value)) {
                 content = this.renderWordDiff(value, this.props.renderContent);
@@ -109,13 +111,15 @@ class DiffViewer extends React.Component {
                         [this.styles.emptyGutter]: !lineNumber,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
+                        [this.styles.diffNoised]: noised,
                         [this.styles.highlightedGutter]: highlightLine,
                     }) },
                     React.createElement("pre", { className: this.styles.lineNumber }, lineNumber))),
                 !this.props.splitView && !this.props.hideLineNumbers && (React.createElement("td", { onClick: additionalLineNumber && this.onLineNumberClickProxy(additionalLineNumberTemplate), className: cn(this.styles.gutter, {
                         [this.styles.emptyGutter]: !additionalLineNumber,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
+                        [this.styles.diffNoised]: noised,
                         [this.styles.highlightedGutter]: highlightLine,
                     }) },
                     React.createElement("pre", { className: this.styles.lineNumber }, additionalLineNumber))),
@@ -134,6 +138,7 @@ class DiffViewer extends React.Component {
                         [this.styles.emptyLine]: !content,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
+                        [this.styles.diffNoised]: noised,
                         [this.styles.highlightedLine]: highlightLine,
                     }) },
                     React.createElement("pre", null,
@@ -143,9 +148,12 @@ class DiffViewer extends React.Component {
                         [this.styles.emptyLine]: !content,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
+                        [this.styles.diffNoised]: noised,
                         [this.styles.highlightedLine]: highlightLine,
                     }) },
-                    React.createElement("pre", { className: this.styles.contentText }, content))));
+                    React.createElement("pre", { className: cn(this.styles.contentText, {
+                            [this.styles.wordNoised]: noised
+                        }) }, content))));
         };
         /**
          * Generates lines for split view.

diff --git a/lib/styles.d.ts b/lib/styles.d.ts
@@ -13,6 +13,7 @@ export interface ReactDiffViewerStyles {
     wordDiff?: string;
     wordAdded?: string;
     wordRemoved?: string;
+    wordNoised?: string;
     codeFoldGutter?: string;
     emptyGutter?: string;
     emptyLine?: string;
@@ -30,12 +31,15 @@ export interface ReactDiffViewerStylesVariables {
     diffViewerTitleBorderColor?: string;
     addedBackground?: string;
     addedColor?: string;
+    noisedBackground?: string;
+    noisedColor?: string;
     removedBackground?: string;
     removedColor?: string;
     wordAddedBackground?: string;
     wordRemovedBackground?: string;
     addedGutterBackground?: string;
     removedGutterBackground?: string;
+    noisedGutterBackground?: string;
     gutterBackground?: string;
     gutterBackgroundDark?: string;
     highlightBackground?: string;
@@ -44,6 +48,7 @@ export interface ReactDiffViewerStylesVariables {
     codeFoldBackground?: string;
     emptyLineBackground?: string;
     gutterColor?: string;
+    noisedGutterColor?: string;
     addedGutterColor?: string;
     removedGutterColor?: string;
     codeFoldContentColor?: string;
@@ -56,6 +61,7 @@ export interface ReactDiffViewerStylesOverride {
     diffContainer?: Interpolation;
     diffRemoved?: Interpolation;
     diffAdded?: Interpolation;
+    diffNoised?: Interpolation;
     marker?: Interpolation;
     emptyGutter?: Interpolation;
     highlightedLine?: Interpolation;
@@ -67,6 +73,7 @@ export interface ReactDiffViewerStylesOverride {
     wordDiff?: Interpolation;
     wordAdded?: Interpolation;
     wordRemoved?: Interpolation;
+    wordNoised?: Interpolation;
     codeFoldGutter?: Interpolation;
     emptyLine?: Interpolation;
     content?: Interpolation;

diff --git a/lib/styles.js b/lib/styles.js
@@ -20,12 +20,16 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             diffViewerBackground: '#fff',
             diffViewerColor: '#212529',
             addedBackground: '#e6ffed',
+            noisedBackground: '#fefae6',
             addedColor: '#24292e',
+            noisedColor: '#24292e',
             removedBackground: '#ffeef0',
             removedColor: '#24292e',
             wordAddedBackground: '#acf2bd',
             wordRemovedBackground: '#fdb8c0',
+            wordNoisedBackground: '#fef3c7',
             addedGutterBackground: '#cdffd8',
+            noisedGutterBackground: '#cdffd8',
             removedGutterBackground: '#ffdce0',
             gutterBackground: '#f7f7f7',
             gutterBackgroundDark: '#f3f1f1',
@@ -36,6 +40,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             emptyLineBackground: '#fafbfc',
             gutterColor: '#212529',
             addedGutterColor: '#212529',
+            noisedGutterColor: '#212529',
             removedGutterColor: '#212529',
             codeFoldContentColor: '#212529',
             diffViewerTitleBackground: '#fafbfc',
@@ -46,12 +51,16 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             diffViewerBackground: '#2e303c',
             diffViewerColor: '#FFF',
             addedBackground: '#044B53',
+            noisedBackground: '#fefae6',
             addedColor: 'white',
+            noisedColor: '#24292e',
             removedBackground: '#632F34',
             removedColor: 'white',
             wordAddedBackground: '#055d67',
             wordRemovedBackground: '#7d383f',
+            wordNoisedBackground: '#fef3c7',
             addedGutterBackground: '#034148',
+            noisedGutterBackground: '#cdffd8',
             removedGutterBackground: '#632b30',
             gutterBackground: '#2c2f3a',
             gutterBackgroundDark: '#262933',
@@ -62,6 +71,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             emptyLineBackground: '#363946',
             gutterColor: '#666c87',
             addedGutterColor: '#8c8c8c',
+            noisedGutterColor: '#212529',
             removedGutterColor: '#8c8c8c',
             codeFoldContentColor: '#656a8b',
             diffViewerTitleBackground: '#2f323e',
@@ -137,6 +147,17 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         },
         label: 'diff-added',
     });
+    const diffNoised = (0, emotion_1.css)({
+        background: variables.noisedBackground,
+        color: variables.noisedColor,
+        pre: {
+            color: variables.noisedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.noisedGutterColor,
+        },
+        label: 'diff-noised',
+    });
     const wordDiff = (0, emotion_1.css)({
         padding: 2,
         display: 'inline-flex',
@@ -151,6 +172,10 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         background: variables.wordRemovedBackground,
         label: 'word-removed',
     });
+    const wordNoised = (0, emotion_1.css)({
+        background: variables.wordNoisedBackground,
+        label: 'word-noised'
+    });
     const codeFoldGutter = (0, emotion_1.css)({
         backgroundColor: variables.codeFoldGutterBackground,
         label: 'code-fold-gutter',
@@ -189,11 +214,16 @@ exports.default = (styleOverride, useDarkTheme = false) => {
                 color: variables.removedColor,
             },
         },
+        [`&.${diffNoised}`]: {
+            pre: {
+                color: variables.noisedColor,
+            },
+        },
     });
     const highlightedLine = (0, emotion_1.css)({
         background: variables.highlightBackground,
         label: 'highlighted-line',
-        [`.${wordAdded}, .${wordRemoved}`]: {
+        [`.${wordAdded}, .${wordRemoved}, .${wordNoised}`]: {
             backgroundColor: 'initial',
         },
     });
@@ -224,6 +254,9 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         [`&.${diffRemoved}`]: {
             background: variables.removedGutterBackground,
         },
+        [`&.${diffNoised}`]: {
+            background: variables.noisedGutterBackground,
+        },
         [`&.${highlightedGutter}`]: {
             background: variables.highlightGutterBackground,
             '&:hover': {
@@ -246,6 +279,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         diffContainer,
         diffRemoved,
         diffAdded,
+        diffNoised,
         splitView,
         marker,
         highlightedGutter,
@@ -255,6 +289,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         wordDiff,
         wordAdded,
         wordRemoved,
+        wordNoised,
         codeFoldGutter,
         codeFold,
         emptyGutter,