Merge pull request #219 from liuliu-dev/add-diff-view

Add diff view

Author: liuliu-dev

.gitignore

@@ -19,3 +19,5 @@
 .npmignore
 
 storybook-static/
+
+.env

CHANGELOG.md

@@ -180,3 +180,7 @@ If you are upgrading from a version prior to 2.0.0, please note the changes to p
 ## [2.2.7]
 
 -- Add optional `onCommitClick` function, click color block.
+
+## [2.3.0]
+
+-- Added diff stats on commit click via the `getDiff` function.

README.md

@@ -8,17 +8,18 @@
 
 The Commit Graph package is a React component suite designed to visualize commit graphs in an interactive and informative way. It showcases commit history within a repository with support for infinite scroll loading. See [this post](https://www.dolthub.com/blog/2024-08-07-drawing-a-commit-graph/) for the implementation details.
 
-`CommitGraph` is utilized by platforms like [DoltHub](https://www.dolthub.com) to visualize database commit log histories.
+It is used by platforms like [DoltHub](https://www.dolthub.com) to visualize database commit log histories.
 
 ## Demo
 
-The [demo](https://liuliu-dev.github.io/CommitGraph/) features sample commit data and real GitHub repository graphs.
+Explore the [demo](https://liuliu-dev.github.io/CommitGraph/) for sample commit data and real GitHub repository graphs.
 
 ## Features
 
-- **Interactive Commit Graph Visualization:** Render commit history as an interactive graph, offering a clear and detailed view of repository activities.
-- **Infinite Scroll Support:** `CommitGraph.WithInfiniteScroll` enhances the user experience for large commit histories by dynamically loading new content as users scroll.
-- **Customizable Styles:** Extensive styling options for the commit log graph, including node colors, spacing, and more, to seamlessly match your project's design.
+- **Interactive Commit Graph Visualization:** Provides a dynamic visual of commit history with detailed repository activity.
+- **Infinite Scroll Support:** `CommitGraph.WithInfiniteScroll` dynamically loads new content as users scroll through large commit histories.
+- **Customizable Styles:** Easily style the commit log graph, including node colors, spacing, and more.
+- **Diff Stats on Commit Click:** If a `getDiff` function is provided, clicking a commit will display additional file change stats, including additions, deletions, and file modifications.
 
 ## Installation
 
@@ -28,7 +29,7 @@ npm install commit-graph
 
 ## Quick Start
 
-### Using CommitGraph
+### UBasic Usage (without infinite scroll):
 
 For a basic implementation without infinite scroll:
 
@@ -54,16 +55,29 @@ const MyComponent = () => {
         branchColors: ["#FF0000", "#00FF00", "#0000FF"],
         nodeRadius: 2,
       }}
+      getDiff={async (base, head) => {
+        // Your implementation to fetch diff stats
+        return {
+          files: [
+            {
+              filename: "example.txt",
+              status: "modified",
+              additions: 10,
+              deletions: 2,
+            },
+          ],
+        };
+      }}
     />
   );
 };
 
 export default MyComponent;
 ```
 
-### Using CommitGraph.WithInfiniteScroll
+### Using `CommitGraph.WithInfiniteScroll`
 
-For implementations requiring infinite scroll to handle large commit histories:
+For large commit histories requiring infinite scroll:
 
 ```jsx
 import React from "react";
@@ -89,20 +103,74 @@ export default MyComponent;
 ### Common Props for CommitGraph and CommitGraph.WithInfiniteScroll
 
 - commits (array): An array of `Commit` objects representing the commit history.
-- branchHeads (array): An array of `Branch` objects representing the branch heads in the commit-graph.
+
+- branchHeads (array): An array of `Branch` objects representing the branch heads.
+
+- getDiff (function, optional): A function that returns a `Promise` resolving to a [`Diff`](#diff-type) object. Fetches file changes for clicked commits.
+
+- currentBranch (string, optional): The name of the current branch.
+
+- fullSha (boolean, optional): Displays the full SHA of a commit instead of the shortened SHA.
+
+- onCommitClick (function, optional): Function to be called when a commit is clicked, receiving the clicked commit as an argument.
+
+- dateFormatFn (function, optional): Formats the commit dates. Accepts a string, number, or Date and returns a formatted string.
+
+```typescript
+dateFormatFn?: (d: string | number | Date) => string;
+```
+
+Example:
+
+```typescript
+const customDateTimeFormatFn = (d: string | number | Date): string => {
+  return new Date(d).toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+  });
+};
+
+const MyComponent = () => {
+  // Your commit and branch head data, loadMore function, and hasMore flag
+  return (
+    <CommitGraph.WithInfiniteScroll
+      commits={/* Your commits data */}
+      branchHeads={/* Your branch heads data */}
+      loadMore={/* Your loadMore function */}
+      hasMore={/* hasMore flag */}
+      dateFormatFn={customDateTimeFormatFn}
+    />
+  );
+};
+
+```
+
+- graphStyle (object, optional): Customize the graph styling. Example:
+
+```typescript
+const graphStyle = {
+  commitSpacing: 60,
+  branchSpacing: 20,
+  nodeRadius: 2,
+  branchColors: ["#FF0000", "#00FF00", "#0000FF"],
+};
+```
 
 ### Additional Props for CommitGraph.WithInfiniteScroll
 
-- loadMore (function): Function to load more commits upon reaching the scroll end.
-- hasMore (boolean): Indicates whether more commits are available to load.
+- loadMore (function): Function to load more commits as the user scrolls.
 
-## Type Definitions
+- hasMore (boolean): Boolean flag indicating whether more commits are available to load.
 
-These type definitions should be used to structure the data passed to the commits and branchHeads props of both CommitGraph and CommitGraph.WithInfiniteScroll components, ensuring proper visualization of commit history and branch information.
+## Type Definitions
 
 ### `Commit` Type
 
-The `Commit` type represents individual commits in the commit history. Each `Commit` object should conform to the following structure:
+Represents individual commits:
 
 ```typescript
 type ParentCommit = {
@@ -124,11 +192,9 @@ export type Commit = {
 };
 ```
 
-This type definition includes the commit's SHA, author information, commit message, an array of parent commits, and an optional URL to the commit.
-
 ### `Branch` Type
 
-The `Branch` type defines the structure for branches in the repository, each associated with a particular commit:
+Defines repository branches, each associated with a commit:
 
 ```typescript
 export type Branch = {
@@ -140,66 +206,31 @@ export type Branch = {
 };
 ```
 
-Each Branch object should include the branch's name, the SHA of the latest commit on the branch, and an optional link to the branch.
-
-### `graphStyle` (object, optional)
+### `Diff` Type
 
-An optional object specifying the styling options for the commit-graph. The `graphStyle` object should have the following properties:
-
-- `commitSpacing` (number): The vertical spacing between commits.
-- `branchSpacing` (number): The horizontal spacing between branches.
-- `branchColors` (array of strings): An array of colors to be used for different branches. Default: `['#FF0000', '#00FF00', '#0000FF']`.
-- `nodeRadius` (number): The radius of the commit node circles.
-
-### `dateFormatFn` (function, optional)
-
-An optional function to format commit dates. Takes a Date, number, or string as input and returns a string.
+Represents changes between two commits:
 
 ```typescript
-dateFormatFn?: (d: string | number | Date) => string;
+export type Diff = {
+  files: ChangedFile[];
+};
 ```
 
-example:
+### `ChangedFile` Type
 
-```typescript
-const customDateTimeFormatFn = (d: string | number | Date): string => {
-  return new Date(d).toLocaleString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-  });
-};
+Details of files changed between commits:
 
-const MyComponent = () => {
-  // Your commit and branch head data, loadMore function, and hasMore flag
-  return (
-    <CommitGraph.WithInfiniteScroll
-      commits={/* Your commits data */}
-      branchHeads={/* Your branch heads data */}
-      loadMore={/* Your loadMore function */}
-      hasMore={/* hasMore flag */}
-      dateFormatFn={customDateTimeFormatFn}
-    />
-  );
+```typescript
+export type ChangedFile = {
+  filename: string;
+  status: string; // "added", "modified", or "deleted"
+  additions: number;
+  deletions: number;
+  patch?: string; // Optional patch data for the changes
+  blob_url?: string; // Optional URL to the file blob
 };
-
 ```
 
-### `currentBranch` (string, optional)
-
-The name of the current branch.
-
-### `fullSha` (boolean, optional)
-
-Instead of the default shortened SHA, display the full SHA of the commit.
-
-### `onCommitClick` (function, optional)
-
-An optional function to be called when a commit is clicked. The function receives the clicked commit as an argument.
-
 ## Storybook
 
 Explore the Commit Graph component and its features by running storybook:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "commit-graph",
-  "version": "2.2.7",
+  "version": "2.3.0",
   "homepage": "https://liuliu-dev.github.io/CommitGraph/",
   "author": "Liu Liu <[email protected]>",
   "description": "A React component to visualize a commit graph.",
@@ -50,7 +50,9 @@
     "@dolthub/web-utils": "^0.1.5",
     "classnames": "^2.3.2",
     "react": ">=18.0.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": ">=18.0.0",
+    "react-icons": "^5.3.0",
     "react-infinite-scroller": "^1.2.6",
     "react-tooltip": "^5.26.3",
     "reactjs-popup": "^2.0.6"

src/components/CommitDetails/index.module.css

@@ -5,6 +5,7 @@
   margin-top: auto;
   margin-bottom: auto;
   max-width: 1800px;
+  position: relative;
 }
 
 .labelAndLink {
@@ -36,3 +37,26 @@
   max-width: 90%;
   visibility: visible;
 }
+
+.diffSection {
+  font-family: "Source Sans Pro";
+  font-size: small;
+  border: 1px solid #e1e4e8;
+  background-color: white;
+  position: absolute;
+  width: 320px;
+  right: 1rem;
+  top: 1rem;
+  z-index: 10;
+  color: #010a40;
+  border-radius: 0.5rem;
+}
+
+.comments {
+  border: 1px solid #e1e4e8;
+  background-color: white;
+  width: 320px;
+  position: fixed;
+  z-index: 10;
+  right: 0;
+}