feat : csm pagination view

feat : csm pagination view

Author: chae-dahee

packages/analysis-engine/src/csm.spec.ts

@@ -438,13 +438,8 @@ describe("csm", () => {
 
   describe("buildPaginatedCSMDict", () => {
     it("should load first page when lastCommitId is not provided", () => {
-      const perPage = 2;
-      const result = buildPaginatedCSMDict(
-        fakeCommitNodeDict,
-        fakeStemDict,
-        "master",
-        perPage
-      );
+      const commitCountPerPage = 2;
+      const result = buildPaginatedCSMDict(fakeCommitNodeDict, fakeStemDict, "master", commitCountPerPage);
 
       expect(result).toBeDefined();
       expect(result.master).toBeDefined();
@@ -456,12 +451,12 @@ describe("csm", () => {
     });
 
     it("should load next page when lastCommitId is provided", () => {
-      const perPage = 2;
+      const commitCountPerPage = 2;
       const result = buildPaginatedCSMDict(
         fakeCommitNodeDict,
         fakeStemDict,
         "master",
-        perPage,
+        commitCountPerPage,
         "4" // Last commit of first page
       );
 
@@ -474,12 +469,12 @@ describe("csm", () => {
     });
 
     it("should return remaining nodes when perPage exceeds remaining nodes", () => {
-      const perPage = 10;
+      const commitCountPerPage = 10;
       const result = buildPaginatedCSMDict(
         fakeCommitNodeDict,
         fakeStemDict,
         "master",
-        perPage,
+        commitCountPerPage,
         "2" // Only [1, 0] remaining
       );
 
@@ -491,12 +486,12 @@ describe("csm", () => {
     });
 
     it("should return empty array when no more nodes available", () => {
-      const perPage = 2;
+      const commitCountPerPage = 2;
       const result = buildPaginatedCSMDict(
         fakeCommitNodeDict,
         fakeStemDict,
         "master",
-        perPage,
+        commitCountPerPage,
         "0" // Last node
       );
 
@@ -507,44 +502,23 @@ describe("csm", () => {
 
     it("should throw error when lastCommitId is invalid", () => {
       expect(() => {
-        buildPaginatedCSMDict(
-          fakeCommitNodeDict,
-          fakeStemDict,
-          "master",
-          2,
-          "invalid-commit-id"
-        );
+        buildPaginatedCSMDict(fakeCommitNodeDict, fakeStemDict, "master", 2, "invalid-commit-id");
       }).toThrow("Invalid lastCommitId");
     });
 
     it("should throw error when perPage is less than or equal to 0", () => {
       expect(() => {
-        buildPaginatedCSMDict(
-          fakeCommitNodeDict,
-          fakeStemDict,
-          "master",
-          0
-        );
+        buildPaginatedCSMDict(fakeCommitNodeDict, fakeStemDict, "master", 0);
       }).toThrow("perPage must be greater than 0");
 
       expect(() => {
-        buildPaginatedCSMDict(
-          fakeCommitNodeDict,
-          fakeStemDict,
-          "master",
-          -1
-        );
+        buildPaginatedCSMDict(fakeCommitNodeDict, fakeStemDict, "master", -1);
       }).toThrow("perPage must be greater than 0");
     });
 
     it("should throw error when base branch does not exist", () => {
       expect(() => {
-        buildPaginatedCSMDict(
-          fakeCommitNodeDict,
-          fakeStemDict,
-          "non-existent-branch",
-          2
-        );
+        buildPaginatedCSMDict(fakeCommitNodeDict, fakeStemDict, "non-existent-branch", 2);
       }).toThrow("no master-stem");
     });
 
@@ -566,14 +540,7 @@ describe("csm", () => {
         },
       } as unknown as PullRequest;
 
-      const result = buildPaginatedCSMDict(
-        fakeCommitNodeDict,
-        fakeStemDict,
-        "master",
-        1,
-        undefined,
-        [fakePR]
-      );
+      const result = buildPaginatedCSMDict(fakeCommitNodeDict, fakeStemDict, "master", 1, undefined, [fakePR]);
 
       expect(result.master[0].base.commit.id).toBe("5");
       // PR integration logic should be applied

packages/analysis-engine/src/csm.ts

@@ -165,13 +165,13 @@ export const buildPaginatedCSMDict = (
   commitDict: CommitDict,
   stemDict: StemDict,
   baseBranchName: string,
-  perPage: number,
+  commitCountPerPage: number,
   lastCommitId?: string,
   pullRequests: Array<PullRequest> = []
 ): CSMDictionary => {
-  // Validate perPage
-  if (perPage <= 0) {
-    throw new Error("perPage must be greater than 0");
+  // Validate commitCountPerPage
+  if (commitCountPerPage <= 0) {
+    throw new Error("commitCountPerPage must be greater than 0");
   }
 
   // Validate stemDict
@@ -196,7 +196,7 @@ export const buildPaginatedCSMDict = (
   }
 
   // Calculate end index and extract page nodes
-  const endIndex = Math.min(startIndex + perPage, baseStem.nodes.length);
+  const endIndex = Math.min(startIndex + commitCountPerPage, baseStem.nodes.length);
   const pageNodes = baseStem.nodes.slice(startIndex, endIndex);
 
   // Build CSM nodes with PR integration

packages/analysis-engine/src/index.ts

@@ -8,7 +8,7 @@ import getCommitRaws from "./parser";
 import { PluginOctokit } from "./pluginOctokit";
 import { buildStemDict } from "./stem";
 import { getSummary } from "./summary";
-import type { CSMNode } from "./types";
+import type { AnalyzeGitResult } from "./types";
 
 export { buildPaginatedCSMDict } from "./csm";
 
@@ -30,6 +30,12 @@ export class AnalysisEngine {
 
   private baseBranchName!: string;
 
+  // Cached data
+  private commitDict?: ReturnType<typeof buildCommitDict>;
+  private pullRequests?: Awaited<ReturnType<PluginOctokit["getPullRequests"]>>;
+  private stemDict?: ReturnType<typeof buildStemDict>;
+  private isPRSuccess: boolean = true;
+
   constructor(args: AnalysisEngineArgs) {
     this.insertArgs(args);
   }
@@ -51,76 +57,88 @@ export class AnalysisEngine {
     this.octokit = container.resolve(PluginOctokit);
   };
 
-  public analyzeGit = async (perPage?: number, lastCommitId?: string) => {
-    let isPRSuccess = true;
+  public init = async () => {
     if (this.isDebugMode) console.log("baseBranchName: ", this.baseBranchName);
 
     const commitRaws = getCommitRaws(this.gitLog);
-    if (this.isDebugMode) {
-      console.log("commitRaws: ", commitRaws);
-    }
+    if (this.isDebugMode) console.log("commitRaws: ", commitRaws);
 
-    const commitDict = buildCommitDict(commitRaws);
-    if (this.isDebugMode) console.log("commitDict: ", commitDict);
+    this.commitDict = buildCommitDict(commitRaws);
+    if (this.isDebugMode) console.log("commitDict: ", this.commitDict);
 
-    const pullRequests = await this.octokit
+    this.pullRequests = await this.octokit
       .getPullRequests()
       .catch((err) => {
         console.error(err);
-        isPRSuccess = false;
+        this.isPRSuccess = false;
         return [];
       })
       .then((pullRequests) => {
         console.log("success, pr = ", pullRequests);
         return pullRequests;
       });
-    if (this.isDebugMode) console.log("pullRequests: ", pullRequests);
+    if (this.isDebugMode) console.log("pullRequests: ", this.pullRequests);
 
-    const stemDict = buildStemDict(commitDict, this.baseBranchName);
-    if (this.isDebugMode) console.log("stemDict: ", stemDict);
+    this.stemDict = buildStemDict(this.commitDict, this.baseBranchName);
+    if (this.isDebugMode) console.log("stemDict: ", this.stemDict);
+  };
+
+  public analyzeGit = async (commitCountPerPage?: number, lastCommitId?: string): Promise<AnalyzeGitResult> => {
+    if (!this.commitDict || !this.stemDict || !this.pullRequests) {
+      throw new Error("AnalysisEngine not initialized. Call init() first.");
+    }
 
     // Paginated CSM
-    if (perPage) {
+    if (commitCountPerPage) {
       const csmDict = buildPaginatedCSMDict(
-        commitDict,
-        stemDict,
+        this.commitDict,
+        this.stemDict,
         this.baseBranchName,
-        perPage,
+        commitCountPerPage,
         lastCommitId,
-        pullRequests
+        this.pullRequests
       );
       const list = csmDict[this.baseBranchName] ?? [];
-      const lastNode: CSMNode | undefined = list.length > 0 ? list[list.length - 1] : undefined;
+      const lastNode = list.length > 0 ? list[list.length - 1] : undefined;
 
-      const isLastPage = list.length < perPage;
-      const nextCommitId = !isLastPage && lastNode ? lastNode.base.commit.id : null;
+      const isLastPage = list.length < commitCountPerPage;
+      const nextCommitId = !isLastPage && lastNode ? lastNode.base.commit.id : undefined;
 
       return {
-        isPRSuccess,
+        isPRSuccess: this.isPRSuccess,
         csmDict,
         nextCommitId,
         isLastPage,
       };
     } else {
       // Non-paginated CSM
-      const csmDict = buildCSMDict(commitDict, stemDict, this.baseBranchName, pullRequests);
+      const csmDict = buildCSMDict(this.commitDict, this.stemDict, this.baseBranchName, this.pullRequests);
       if (this.isDebugMode) console.log("csmDict: ", csmDict);
-      const nodes = stemDict.get(this.baseBranchName)?.nodes?.map(({ commit }) => commit);
+      const nodes = this.stemDict.get(this.baseBranchName)?.nodes?.map(({ commit }) => commit);
       const geminiCommitSummary = await getSummary(nodes ? nodes?.slice(-10) : []);
       if (this.isDebugMode) console.log("GeminiCommitSummary: ", geminiCommitSummary);
 
       return {
-        isPRSuccess,
+        isPRSuccess: this.isPRSuccess,
         csmDict,
-        nextCommitId: null,
+        nextCommitId: undefined,
         isLastPage: true,
       };
     }
   };
 
+  public getBaseBranchName = () => {
+    return this.baseBranchName;
+  };
+
   public updateArgs = (args: AnalysisEngineArgs) => {
     if (container.isRegistered("OctokitOptions")) container.clearInstances();
     this.insertArgs(args);
+    // Clear cached data
+    this.commitDict = undefined;
+    this.stemDict = undefined;
+    this.pullRequests = undefined;
+    this.isPRSuccess = true;
   };
 }
 

packages/analysis-engine/src/types/CSM.ts

@@ -8,3 +8,9 @@ export interface CSMNode {
 export interface CSMDictionary {
   [branch: string]: CSMNode[];
 }
+export type AnalyzeGitResult = {
+  isPRSuccess: boolean;
+  csmDict: CSMDictionary;
+  nextCommitId: string | undefined;
+  isLastPage: boolean;
+};

packages/view/src/App.tsx

@@ -12,11 +12,17 @@ import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
 import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore, useThemeStore } from "store";
 import { THEME_INFO } from "components/ThemeSelector/ThemeSelector.const";
+import { COMMIT_COUNT_PER_PAGE } from "constants/constants";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
   const { handleChangeAnalyzedData } = useAnalayzedData();
-  const filteredData = useDataStore((state) => state.filteredData);
+  const { filteredData, nextCommitId, isLastPage } = useDataStore((state) => ({
+    filteredData: state.filteredData,
+    nextCommitId: state.nextCommitId,
+    isLastPage: state.isLastPage,
+  }));
+
   const { handleChangeBranchList } = useBranchStore();
   const { handleGithubInfo } = useGithubInfo();
   const { loading, setLoading } = useLoadingStore();
@@ -26,19 +32,29 @@ const App = () => {
   useEffect(() => {
     if (initRef.current === false) {
       const callbacks: IDESentEvents = {
-        handleChangeAnalyzedData,
+        handleChangeAnalyzedData: (payload) => handleChangeAnalyzedData(payload),
         handleChangeBranchList,
         handleGithubInfo,
       };
       setLoading(true);
       ideAdapter.addIDESentEventListener(callbacks);
-      ideAdapter.sendFetchAnalyzedDataMessage();
+      ideAdapter.sendFetchAnalyzedDataMessage({ commitCountPerPage: COMMIT_COUNT_PER_PAGE });
       ideAdapter.sendFetchBranchListMessage();
       ideAdapter.sendFetchGithubInfo();
       initRef.current = true;
     }
   }, [handleChangeAnalyzedData, handleChangeBranchList, handleGithubInfo, ideAdapter, setLoading]);
 
+  const handleLoadMore = () => {
+    if (loading || isLastPage) return;
+
+    setLoading(true);
+    ideAdapter.sendFetchAnalyzedDataMessage({
+      commitCountPerPage: COMMIT_COUNT_PER_PAGE,
+      lastCommitId: nextCommitId,
+    });
+  };
+
   if (loading) {
     return (
       <BounceLoader
@@ -66,10 +82,20 @@ const App = () => {
       </div>
       <div>
         {filteredData.length !== 0 ? (
-          <div className="middle-container">
-            <VerticalClusterList />
-            <Statistics />
-          </div>
+          <>
+            <div className="middle-container">
+              <VerticalClusterList />
+              <Statistics />
+            </div>
+            <div className="load-more-container">
+              <button
+                onClick={handleLoadMore}
+                disabled={isLastPage || loading}
+              >
+                {loading ? "Loading..." : isLastPage ? "No More Commits" : "Load More"}
+              </button>
+            </div>
+          </>
         ) : (
           <div className="no-commits-container">
             <MonoLogo />

packages/view/src/components/@common/Author/Author.tsx

@@ -2,7 +2,7 @@ import { Tooltip, Avatar } from "@mui/material";
 
 import type { AuthorInfo } from "types";
 
-import { GITHUB_URL } from "../../../constants/constants";
+import { GITHUB_URL } from "constants/constants";
 
 import { AVATAR_STYLE, TOOLTIP_STYLE } from "./Author.const";