Merge branch 'main' of https://github.com/githru/githru-vscode-ext into view-563

Author: joonwonBaek

CONTRIBUTING.md

@@ -1,18 +1,18 @@
 # Contributing to Githru
 
-TODO: Add support수정 필요!
+TODO: Add support 수정 필요!
 
 ## Develop Environment
 
 - [node](https://nodejs.org/ko/download/) -v v14.17.3
 - [vscode](https://code.visualstudio.com/)
-- [vscode plugin - eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [vscode plugin - ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
 ## Installation
 
 1. 이 저장소를 [Fork](https://help.github.com/articles/fork-a-repo/) 한 후
    로컬 기기에 [clone](https://help.github.com/articles/cloning-a-repository/) 합니다.
-2. VSCode를 사용한다면 아래 과정을 통해 custom TS setting을 활성화해야합니다.
+2. VSCode를 사용한다면 아래 과정을 통해 custom TS setting을 활성화해야 합니다.
 
    1. TypeScript 파일이 열려 있는 상태로 `ctrl(cmd) + shift + p`를 입력합니다.
    2. "Select TypeScript Version"을 선택합니다.
@@ -42,7 +42,7 @@ TODO: Add support수정 필요!
    yarn test
    ```
 
-7. [demo README](https://github.com/EveryAnalytics/react-analytics-provider/tree/main/demo)를 참고해 demo앱도 실행해 보세요.
+7. [demo README](https://github.com/EveryAnalytics/react-analytics-provider/tree/main/demo)를 참고해 demo 앱도 실행해 보세요.
 
 ## Debugging
 
@@ -60,15 +60,15 @@ TODO: Add support수정 필요!
 
 ## Commit message
 
-커밋 메세지는 제목과 본문을 포함해야 합니다.
+커밋 메시지는 제목과 본문을 포함해야 합니다.
 
 제목은 해당 커밋에 대한 주요 내용을 간략하게 기록합니다.
 형식은 https://www.conventionalcommits.org/en/v1.0.0/ 를 따릅니다.
 
 - optional scope을 사용하며, `engine`, `vscode`, `view` 3가지 scope만을 사용합니다.
 - ex) feat(view): Add File Icicle Tree view.
 
-본문은 커밋에서 수정된 상세내역을 작성합니다. 생략 가능하며, `어떻게`보단 `무엇을`, `왜` 해결했는지 적어주시는 것이 좋습니다.
+본문은 커밋에서 수정된 상세내용을 작성합니다. 생략 가능하며, `어떻게`보단 `무엇을`, `왜` 해결했는지 적어주시는 것이 좋습니다.
 
 상황에 따라 연관된 이슈 트래킹 번호를 포함합니다.
 
@@ -88,7 +88,7 @@ PR의 제목 형식은 commit과 동일하게 맞추면 됩니다.
 
 ## Coding Guidelines
 
-`vscode`의 `eslint` 플러그인을 통해 미리 설정된 코드 컨벤션을 적용하고 검사해 볼 수 있습니다.
+`vscode`의 `ESlint` 플러그인을 통해 미리 설정된 코드 컨벤션을 적용하고 검사해 볼 수 있습니다.
 
 ## Add yourself as a contributor
 

README.md

@@ -1,8 +1,4 @@
 # githru-vscode-ext
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
 Lightweight but robust Githru for VSCode Extension
 
 ## Getting Started

packages/view/src/App.scss

@@ -32,8 +32,9 @@ body {
 }
 
 .middle-container {
-  display: flex;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: 4fr 1fr;
   height: calc(100vh - 200px);
-  margin-top: 20px;
+
+  padding: 20px;
 }

packages/view/src/App.tsx

@@ -3,19 +3,13 @@ import { container } from "tsyringe";
 import { useEffect, useRef } from "react";
 import BounceLoader from "react-spinners/BounceLoader";
 
-import {
-  BranchSelector,
-  Statistics,
-  TemporalFilter,
-  ThemeSelector,
-  VerticalClusterList,
-  FilteredAuthors,
-} from "components";
+import { BranchSelector, Statistics, TemporalFilter, ThemeSelector, VerticalClusterList } from "components";
 import "./App.scss";
 import type IDEPort from "ide/IDEPort";
 import { useGlobalData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
+import type { RemoteGitHubInfo } from "types/RemoteGitHubInfo";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
@@ -39,6 +33,18 @@ const App = () => {
     }
   }, [handleChangeAnalyzedData, handleChangeBranchList, ideAdapter, setLoading]);
 
+  const { setOwner, setRepo } = useGlobalData();
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent<RemoteGitHubInfo>) => {
+      const message = event.data;
+      setOwner(message.data.owner);
+      setRepo(message.data.repo);
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+
   if (loading) {
     return (
       <BounceLoader
@@ -65,7 +71,6 @@ const App = () => {
       </div>
       <div className="top-container">
         <TemporalFilter />
-        <FilteredAuthors />
       </div>
       <div className="middle-container">
         {filteredData.length !== 0 ? (

packages/view/src/components/FilteredAuthors/FilteredAuthors.scss

@@ -1,9 +1,13 @@
 .selected-container {
-  position: relative;
-  top: 30px;
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 15px;
   width: 100%;
-  padding: 4px 6px;
+}
+
+.selected-content {
+  display: flex;
+  flex-wrap: wrap;
   box-sizing: border-box;
+  align-items: center;
 }

packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx

@@ -10,20 +10,34 @@ const FilteredAuthors = () => {
   const authSrcMap = usePreLoadAuthorImg();
   const selectedClusters = getInitData(selectedData);
 
+  // 이미 선택된 사용자를 관리
+  const addedAuthors = new Set();
+
   return (
     <div className="selected-container">
-      {authSrcMap &&
-        selectedClusters.map((selectedCluster) => {
-          return selectedCluster.summary.authorNames.map((authorArray: string[]) => {
-            return authorArray.map((authorName: string) => (
-              <Author
-                key={authorName}
-                name={authorName}
-                src={authSrcMap[authorName]}
-              />
-            ));
-          });
-        })}
+      {selectedClusters.length > 0 && <p>Authors:</p>}
+      <div className="selected-content">
+        {authSrcMap &&
+          selectedClusters.map((selectedCluster) => {
+            return selectedCluster.summary.authorNames.map((authorArray: string[]) => {
+              return authorArray.map((authorName: string) => {
+                // 이미 추가된 사용자인지 확인 후 추가되지 않은 경우에만 추가하고 Set에 이름을 저장
+                if (!addedAuthors.has(authorName)) {
+                  addedAuthors.add(authorName);
+                  return (
+                    <Author
+                      key={authorName}
+                      name={authorName}
+                      src={authSrcMap[authorName]}
+                    />
+                  );
+                }
+                // 이미 추가된 사용자인 경우 null 반환
+                return null;
+              });
+            });
+          })}
+      </div>
     </div>
   );
 };

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss

@@ -4,13 +4,12 @@
   width: fit-content;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: flex-start;
 }
 
 .author-bar-chart__header {
   width: 100%;
   text-align: right;
-  padding-left: 40px;
 
   & .select-box {
     font-size: 10px;

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx

@@ -16,23 +16,35 @@ import "./AuthorBarChart.scss";
 
 const AuthorBarChart = () => {
   const { data: totalData, filteredData, setSelectedData, setFilteredData } = useGlobalData();
-  const rawData = useGetSelectedData();
 
+  const rawData = useGetSelectedData();
   const svgRef = useRef<SVGSVGElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
 
   const [metric, setMetric] = useState<MetricType>(METRIC_TYPE[0]);
-  const [prevData, setPrevData] = useState<ClusterNode[]>([]);
-
+  const [prevData, setPrevData] = useState<ClusterNode[][]>([]);
+  const [selectedAuthor, setSelectedAuthor] = useState<string>("");
   const authorData = getDataByAuthor(rawData as ClusterNode[]);
+
   let data = authorData.sort((a, b) => {
     if (a[metric] === b[metric]) {
       return sortDataByName(a.name, b.name);
     }
     return b[metric] - a[metric];
   });
+
   if (data.length > 10) {
-    data = data.slice(0, 10);
+    const topAuthors = data.slice(0, 9);
+    const otherAuthors = data.slice(9);
+    const reducedOtherAuthors = otherAuthors.reduce(
+      (acc, cur) => {
+        acc[metric] += cur[metric];
+        acc.names?.push(cur.name);
+        return acc;
+      },
+      { name: "others", commit: 0, insertion: 0, deletion: 0, names: [] } as AuthorDataType
+    );
+    data = [...topAuthors, reducedOtherAuthors];
   }
 
   useEffect(() => {
@@ -78,13 +90,11 @@ const AuthorBarChart = () => {
       .text(`${metric} # / Total ${metric} # (%)`);
 
     // Event handler
-    const handleMouseOver = () => {
-      tooltip.style("display", "inline-block");
-    };
-    const handleMouseMove = (e: MouseEvent<SVGRectElement | SVGTextElement>, d: AuthorDataType) => {
+    const handleMouseOver = (e: MouseEvent<SVGRectElement | SVGTextElement>, d: AuthorDataType) => {
       tooltip
+        .style("display", "inline-block")
         .style("left", `${e.pageX - 70}px`)
-        .style("top", `${e.pageY - 70}px`)
+        .style("top", `${e.pageY - 120}px`)
         .html(
           `<p class="name">${d.name}</p>
               <p>${metric}: 
@@ -96,20 +106,46 @@ const AuthorBarChart = () => {
               </p>`
         );
     };
+
+    const handleMouseMove = (e: MouseEvent<SVGRectElement | SVGTextElement>) => {
+      tooltip.style("left", `${e.pageX - 70}px`).style("top", `${e.pageY - 120}px`);
+    };
     const handleMouseOut = () => {
       tooltip.style("display", "none");
     };
+
     const handleClickBar = (_: MouseEvent<SVGRectElement | SVGTextElement>, d: AuthorDataType) => {
-      const isAuthorSelected = !!prevData.length;
+      const isAuthorSelected = selectedAuthor === d.name && d.name !== "others";
+
+      const getNewFilteredData = (names: string[]) => {
+        return sortDataByAuthor(totalData, names);
+      };
 
       if (isAuthorSelected) {
-        setFilteredData(prevData);
-        setPrevData([]);
-      } else {
-        setFilteredData(sortDataByAuthor(filteredData, d.name));
-        setPrevData(filteredData);
+        // 현재 선택된 사용자를 다시 클릭하면 이전 데이터로 복원
+        const newFilteredData = prevData.length > 0 ? prevData.pop() : filteredData;
+        setFilteredData(newFilteredData ?? filteredData);
+        setPrevData([...prevData]);
+        setSelectedAuthor("");
+        setSelectedData([]);
+        tooltip.style("display", "none");
+        return;
+      }
+
+      if (d.name === "others") {
+        // "others" 바를 클릭할 때
+        setPrevData([...prevData, filteredData]);
+        setFilteredData(getNewFilteredData(d.names || []));
+        setSelectedAuthor(d.name);
+        setSelectedData([]);
+        tooltip.style("display", "none");
+        return;
       }
 
+      // 특정 사용자를 클릭할 때
+      setPrevData([...prevData, filteredData]);
+      setFilteredData(getNewFilteredData([d.name]));
+      setSelectedAuthor(d.name);
       setSelectedData([]);
       tooltip.style("display", "none");
     };
@@ -158,14 +194,26 @@ const AuthorBarChart = () => {
         .attr("width", 14)
         .attr("height", 14);
     });
-  }, [data, filteredData, metric, prevData, rawData, setFilteredData, setSelectedData, totalData]);
+  }, [
+    data,
+    filteredData,
+    metric,
+    prevData,
+    rawData,
+    setFilteredData,
+    setSelectedData,
+    totalData,
+    selectedAuthor,
+    setSelectedAuthor,
+  ]);
 
   const handleChangeMetric = (e: ChangeEvent<HTMLSelectElement>): void => {
     setMetric(e.target.value as MetricType);
   };
 
   return (
     <div className="author-bar-chart__container">
+      <p>Author Bar Chart</p>
       <div className="author-bar-chart__header">
         <select
           className="select-box"

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.type.ts

@@ -5,6 +5,7 @@ export type AuthorDataType = {
   commit: number;
   insertion: number;
   deletion: number;
+  names?: string[];
 };
 
 export type MetricType = (typeof METRIC_TYPE)[number];

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.util.ts

@@ -51,12 +51,16 @@ export const convertNumberFormat = (d: number | { valueOf(): number }): string =
   return d3.format("~s")(d);
 };
 
-export const sortDataByAuthor = (data: ClusterNode[], author: string): ClusterNode[] => {
+export const sortDataByAuthor = (data: ClusterNode[], names: string[]): ClusterNode[] => {
   return data.reduce((acc: ClusterNode[], cluster: ClusterNode) => {
     const checkedCluster = cluster.commitNodeList.filter((commitNode: CommitNode) =>
-      commitNode.commit.author.names.includes(author)
+      names.some((name) => commitNode.commit.author.names.includes(name))
     );
-    if (!checkedCluster.length) return acc;
-    return [...acc, { nodeTypeName: "CLUSTER" as const, commitNodeList: checkedCluster }];
+
+    if (checkedCluster.length > 0) {
+      acc.push({ nodeTypeName: "CLUSTER", commitNodeList: checkedCluster });
+    }
+
+    return acc;
   }, []);
 };

packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.scss

@@ -1,7 +1,9 @@
 @import "styles/_pallete";
 
 .file-icicle-summary {
+  width: 90%;
   text {
-    fill: $white;
+    fill: var(--primary-color);
+    filter: invert(100) grayscale(100) contrast(100);
   }
 }

packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx

@@ -137,6 +137,7 @@ const FileIcicleSummary = () => {
 
   return (
     <div className="file-icicle-summary">
+      <p>File Summary</p>
       <svg ref={$summary} />
     </div>
   );