Feature: Add Line Count and Object Count Statistics Features #25
Conversation
- 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.
✅ Deploy Preview for virtual-react-json-diff ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @utkuakyuz, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the VirtualDiffViewer component by integrating new statistical features: line count and object count displays. These additions provide users with more detailed insights into the changes between two JSON structures. Alongside these core features, the PR includes robust documentation updates, an improved demo experience, and critical bug fixes to ensure stability and usability. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces line and object count statistics, which is a great new feature. The implementation is mostly solid, with new components for displaying stats and utility functions for calculations. I've left a few comments with suggestions for improvement:
- Refactoring duplicated CSS to improve maintainability.
- Simplifying some conditional rendering logic in the main viewer component.
- Improving the robustness of the object count calculation logic.
- Avoiding direct console logging from within the library.
Overall, these are great additions. Addressing the feedback will make the new features more robust and maintainable.
| const newArr = newArraysWithKey.find((newArr, newIndex) => { | ||
| try { | ||
| const newSignature = `${newIndex}-${newArr.length}-${JSON.stringify(newArr.map((item: any) => item[compareKey]).sort())}`; | ||
| if (processedNewArrays.has(newSignature)) | ||
| return false; | ||
|
|
||
| const oldKeys = oldArr.map((item: any) => item[compareKey]).sort(); | ||
| const newKeys = newArr.map((item: any) => item[compareKey]).sort(); | ||
| const commonKeys = oldKeys.filter((key: any) => newKeys.includes(key)); | ||
|
|
||
| return commonKeys.length > 0; // Arrays share at least one key | ||
| } | ||
| catch (error) { | ||
| console.warn("Error processing new array:", error); | ||
| return false; | ||
| } | ||
| }); |
There was a problem hiding this comment.
The current array matching logic, which finds the first new array that shares at least one key with an old array (commonKeys.length > 0), could be fragile. If an old array could potentially match multiple new arrays, this logic will arbitrarily pick the first one it finds. This may not be the best match (e.g., the one with the most overlap), which could lead to inaccurate object change counts.
Consider a more robust matching strategy, perhaps by calculating an "overlap score" (e.g., based on the number of common keys) and choosing the pair with the highest score. This would make the statistics more reliable, especially for complex diffs.
There was a problem hiding this comment.
Single array matching is OK for now, I already implemented for single array use. If a user request for multiple arrays, we can think about it.
| .line-count-display { | ||
| display: flex; | ||
| gap: 12px; | ||
| margin-top: 5px; | ||
| align-items: center; | ||
| font-size: 11px; | ||
| color: #f8f8f2; | ||
| margin-left: auto; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .line-count-item-sub-holder { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 4px; | ||
| } | ||
|
|
||
| .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); | ||
| } | ||
|
|
||
| /* OBJECT COUNT DISPLAY */ | ||
| .object-count-display { | ||
| display: flex; | ||
| gap: 12px; | ||
| margin-top: 5px; | ||
| align-items: center; | ||
| font-size: 11px; | ||
| color: #f8f8f2; | ||
| margin-left: auto; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .object-count-item-sub-holder { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 4px; | ||
| } | ||
|
|
||
| .object-count-item { | ||
| padding: 2px 6px; | ||
| border-radius: 3px; | ||
| font-weight: 500; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .object-count-item.added { | ||
| background: rgba(100, 182, 67, 0.2); | ||
| color: #a5ff99; | ||
| border: 1px solid rgba(100, 182, 67, 0.3); | ||
| } | ||
|
|
||
| .object-count-item.removed { | ||
| background: rgba(160, 128, 100, 0.2); | ||
| color: #ffaa99; | ||
| border: 1px solid rgba(160, 128, 100, 0.3); | ||
| } | ||
|
|
||
| .object-count-item.modified { | ||
| background: rgba(182, 180, 67, 0.2); | ||
| color: #ecff99; | ||
| border: 1px solid rgba(182, 180, 67, 0.3); | ||
| } | ||
|
|
||
| .object-count-item.total { | ||
| background: rgba(69, 96, 248, 0.2); | ||
| color: #4560f8; | ||
| border: 1px solid rgba(69, 96, 248, 0.3); | ||
| } | ||
|
|
||
| .object-count-item.no-changes { | ||
| background: rgba(248, 248, 242, 0.1); | ||
| color: #f8f8f2; | ||
| border: 1px solid rgba(248, 248, 242, 0.2); | ||
| } |
There was a problem hiding this comment.
There is significant CSS duplication between the styles for .line-count-display and .object-count-display. The rules for ...-display, ...-item-sub-holder, ...-item, and the modifier classes (.added, .removed, etc.) are identical.
To improve maintainability and reduce code size, you could consolidate these into a set of common classes. For example:
/* Common base class */
.stats-display {
display: flex;
gap: 12px;
margin-top: 5px;
/* ... other common styles */
}
.stats-item {
/* ... common item styles */
}
.stats-item.added {
/* ... added styles */
}
/* etc. */Then, in your React components, you can use these classes like <div class="stats-display line-count-display">.
There was a problem hiding this comment.
Later please, all can be refactored, I have plans for it.
1 participant
Resolves #24
Overview
This PR adds two new statistical features to the VirtualDiffViewer component:
Line Count Statistics
showLineCountprop (default:false)+5 added lines, -3 removed lines, ~2 modified lines, 10 total line changesObject Count Statistics
showObjectCountStatsprop (default:false)arrayDiffMethod: "compare-key"+2 added objects, -1 removed objects, ~3 modified objects, 6 total object changesDocs
Demo Updates
json3.jsonandjson4.jsonwith "oid" compareKeyBug Fixes
get-inline-syntax-highlight.tsandrow-renderer-grid.tsxExports
calculateObjectCountStatsutility function for external useUsage Example