feat: add line count display feature to diff viewer

- Introduced a new configuration option to show line counts in the diff viewer. - Added a LineCountDisplay component to visualize added, removed, and modified lines. - Updated the VirtualizedDiffViewer to calculate and display line count statistics based on the diff data. - Enhanced the Sidebar component to include a checkbox for toggling the line count display. - Updated styles for the new line count display feature.

Author: utkuakyuz

demo/src/App.tsx

@@ -25,6 +25,7 @@ export default function App() {
  miniMapWidth: 20,
  hideSearch: false,
  height: 380,
+ showLineCount: true,
 
  // Differ Configuration
  detectCircular: true,
@@ -219,6 +220,7 @@ export default function App() {
  height={config.height}
  miniMapWidth={config.miniMapWidth}
  hideSearch={config.hideSearch}
+ showLineCount={config.showLineCount}
  inlineDiffOptions={{ mode: config.inlineDiffMode }}
  oldValue={parsedOldValue}
  newValue={parsedNewValue}

demo/src/components/Sidebar.tsx

@@ -94,6 +94,19 @@ function Sidebar(props: Props) {
  </label>
  </div>
 
+ <div className="form-group">
+ <label className="checkbox-label">
+ <input
+ type="checkbox"
+ className="form-checkbox"
+ checked={config.showLineCount}
+ onChange={e => updateConfig("showLineCount", e.target.checked)}
+ />
+ Show Line Count
+ </label>
+ <p className="form-hint">Display statistics for added, removed, and modified lines</p>
+ </div>
+
  <div className="form-group">
  <label className="form-label">
  CSS Class Name

demo/src/types/index.ts

@@ -8,6 +8,7 @@ export type Config = {
  miniMapWidth: number;
  hideSearch: boolean;
  height: number;
+ showLineCount: boolean;
 
  // Differ Configuration
  detectCircular: boolean;

src/components/DiffViewer/components/LineCountDisplay.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import type { LineCountStats } from "../types";
+
+type LineCountDisplayProps = {
+ stats: LineCountStats;
+};
+
+export const LineCountDisplay: React.FC<LineCountDisplayProps> = ({ stats }) => {
+ if (stats.total === 0) {
+ return (
+ <div className="line-count-display">
+ <span className="line-count-item no-changes">No changes</span>
+ </div>
+ );
+ }
+
+ return (
+ <div className="line-count-display">
+ {stats.added > 0 && (
+ <span className="line-count-item added">
+ +
+ {stats.added}
+ {" "}
+ added
+ </span>
+ )}
+ {stats.removed > 0 && (
+ <span className="line-count-item removed">
+ -
+ {stats.removed}
+ {" "}
+ removed
+ </span>
+ )}
+ {stats.modified > 0 && (
+ <span className="line-count-item modified">
+ ~
+ {stats.modified}
+ {" "}
+ modified
+ </span>
+ )}
+ <span className="line-count-item total">
+ {stats.total}
+ {" "}
+ total changes
+ </span>
+ </div>
+ );
+};
+
+export default LineCountDisplay;

src/components/DiffViewer/components/VirtualizedDiffViewer.tsx

@@ -4,14 +4,16 @@ import type { VariableSizeList as List } from "react-window";
 import { Differ } from "json-diff-kit";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import type { DiffRowOrCollapsed, SegmentItem, VirtualizedDiffViewerProps } from "../types";
+import type { DiffRowOrCollapsed, LineCountStats, SegmentItem, VirtualizedDiffViewerProps } from "../types";
 
 import "../styles/JsonDiffCustomTheme.css";
 import { useSearch } from "../hooks/useSearch";
 import { fastHash } from "../utils/json-diff/diff-hash";
 import { expandSegment, hasExpandedSegments, hideAllSegments } from "../utils/json-diff/segment-util";
+import { calculateLineCountStats } from "../utils/lineCountUtils";
 import { buildViewFromSegments, generateSegments } from "../utils/preprocessDiff";
 import { DiffMinimap } from "./DiffMinimap";
+import LineCountDisplay from "./LineCountDisplay";
 import SearchboxHolder from "./SearchboxHolder";
 import VirtualDiffGrid from "./VirtualDiffGrid";
 
@@ -32,6 +34,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
  miniMapWidth,
  inlineDiffOptions,
  overScanCount,
+ showLineCount = false,
 }) => {
  const listRef = useRef<List>(null);
  const getDiffDataRef = useRef<typeof getDiffData>();
@@ -58,6 +61,13 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
  return differ.diff(oldValue, newValue);
  }, [oldValue, newValue, differ]);
 
+ const lineCountStats = useMemo((): LineCountStats => {
+ if (!diffData || (diffData[0].length === 0 && diffData[1].length === 0)) {
+ return { added: 0, removed: 0, modified: 0, total: 0 };
+ }
+ return calculateLineCountStats(diffData as [DiffResult[], DiffResult[]]);
+ }, [diffData]);
+
  const [scrollTop, setScrollTop] = useState(0);
  const [segments, setSegments] = useState<SegmentItem[]>([]);
  const [rawLeftDiff, rawRightDiff] = diffData;
@@ -138,6 +148,10 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
  <div><span>{leftTitle}</span></div>
  <div><span>{rightTitle}</span></div>
  </div>
+
+ {showLineCount && (
+ <LineCountDisplay stats={lineCountStats} />
+ )}
  </div>
 
  {/* List & Minimap */}

src/components/DiffViewer/styles/JsonDiffCustomTheme.css

@@ -42,6 +42,53 @@
  background: rgba(182, 180, 67, 0.08);
 }
 
+/* LINE COUNT DISPLAY */
+.line-count-display {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ font-size: 11px;
+ color: #f8f8f2;
+ margin-left: auto;
+}
+
+.line-count-item {
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+.line-count-item.added {
+ background: rgba(100, 182, 67, 0.2);
+ color: #a5ff99;
+ border: 1px solid rgba(100, 182, 67, 0.3);
+}
+
+.line-count-item.removed {
+ background: rgba(160, 128, 100, 0.2);
+ color: #ffaa99;
+ border: 1px solid rgba(160, 128, 100, 0.3);
+}
+
+.line-count-item.modified {
+ background: rgba(182, 180, 67, 0.2);
+ color: #ecff99;
+ border: 1px solid rgba(182, 180, 67, 0.3);
+}
+
+.line-count-item.total {
+ background: rgba(69, 96, 248, 0.2);
+ color: #4560f8;
+ border: 1px solid rgba(69, 96, 248, 0.3);
+}
+
+.line-count-item.no-changes {
+ background: rgba(248, 248, 242, 0.1);
+ color: #f8f8f2;
+ border: 1px solid rgba(248, 248, 242, 0.2);
+}
+
 .json-diff-viewer.json-diff-viewer-theme-custom .empty-equal-cell {
  opacity: 0.4;
  background: repeating-linear-gradient(-53deg, rgb(69, 69, 70), rgb(69, 69, 70) 1.5px, #282a36 1.5px, #282a36 4px);

src/components/DiffViewer/types/index.ts

@@ -32,6 +32,13 @@ export type SearchState = {
  currentIndex: number;
 };
 
+export type LineCountStats = {
+ added: number;
+ removed: number;
+ modified: number;
+ total: number;
+};
+
 export type VirtualizedDiffViewerProps = {
  oldValue: object;
  newValue: object;
@@ -49,6 +56,7 @@ export type VirtualizedDiffViewerProps = {
  miniMapWidth?: number;
  inlineDiffOptions?: InlineDiffOptions;
  overScanCount?: number;
+ showLineCount?: boolean;
 };
 
 export type DiffMinimapProps = {

src/components/DiffViewer/utils/lineCountUtils.ts

@@ -0,0 +1,37 @@
+import type { DiffResult } from "json-diff-kit";
+
+import type { LineCountStats } from "../types";
+
+export function calculateLineCountStats(diffData: [DiffResult[], DiffResult[]]): LineCountStats {
+ const [leftDiff, rightDiff] = diffData;
+
+ let added = 0;
+ let removed = 0;
+ let modified = 0;
+
+ // Count changes from the left diff (removed lines)
+ for (const line of leftDiff) {
+ if (line.type === "remove") {
+ removed++;
+ }
+ else if (line.type === "modify") {
+ modified++;
+ }
+ }
+
+ // Count changes from the right diff (added lines)
+ for (const line of rightDiff) {
+ if (line.type === "add") {
+ added++;
+ }
+ }
+
+ const total = added + removed + modified;
+
+ return {
+ added,
+ removed,
+ modified,
+ total,
+ };
+}