feat(view) add Summary in VerticalClusterList Component

packages/view/package.json

@@ -7,7 +7,7 @@
     "npm": ">=8"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "npm run build && react-scripts start",
     "build": "npm run build:react && npm run build:bundle",
     "build:react": "react-scripts build",
     "build:bundle": "webpack --config webpack.config.js",
@@ -84,6 +84,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "d3": "^7.6.1",
+    "nanoid": "^4.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"

packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.ts

@@ -11,5 +11,5 @@ export function getGraphHeight(commitCounts: number[]) {
     (sum: number, commit: number) => sum + commit,
     0
   );
-  return totalCommit * COMMIT_HEIGHT + (commitCounts.length - 1) * NODE_GAP;
+  return totalCommit * COMMIT_HEIGHT + commitCounts.length * NODE_GAP;
 }

packages/view/src/components/VerticalClusterList/Summary/Summary.scss

@@ -0,0 +1,117 @@
+@import "../../../styles/pallete";
+
+@mixin animation {
+    -webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
+    -moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
+    transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
+}
+
+@mixin shadow {
+    -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+    -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+    box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+}
+
+@mixin border($border--radius) {
+    -webkit-border-radius: $border--radius;
+    -moz-border-radius: $border--radius;
+    border-radius: $border--radius;
+}
+
+body {
+    background-color: #fff;
+    color: #222
+}
+
+.entire {
+    width: 85%;
+    margin-left: 20px;
+}
+
+.cluster {
+    align-items: center;
+    width: 85%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.commit {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.nameBox {
+    display: flex;
+    justify-content: center;
+}
+
+.name {
+    @include border(50px);
+
+    display: flex;
+    width: 30px;
+    height: 30px;
+    font-weight: bold;
+    background-color: $blue-light-A700;
+    color: white;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-size: 15pt;
+
+    &::after {
+        @include animation()
+    }
+
+    &:hover {
+        background-color: $blue-light-A200;
+    }
+}
+
+[data-tooltip-text] {
+    &:hover {
+        position: relative;
+    }
+
+    &::after {
+        @include animation();
+
+        @include shadow();
+
+        @include border(5px);
+
+        content: attr(data-tooltip-text);
+
+        position: absolute;
+        bottom: 30%;
+        left: -9999px;
+
+        color: #FFFFFF;
+        font-size: 12px;
+        padding: 7px 12px;
+        margin-bottom: 10px;
+        width: auto;
+        min-width: max-content;
+        word-wrap: break-word;
+
+        opacity: 0;
+        z-index: 9999;
+    }
+
+    &:hover::after {
+        left: 100%;
+        background-color: rgba(0, 119, 170, 0.8);
+        opacity: 1;
+    }
+}
+
+.message {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 15px;
+}

packages/view/src/components/VerticalClusterList/Summary/Summary.tsx

@@ -0,0 +1,42 @@
+import "./Summary.scss";
+import type { GlobalProps } from "types/global";
+
+import type { Commit, Author, Cluster } from ".";
+import { getInitData } from ".";
+
+const Summary = ({ data }: GlobalProps) => {
+  const info = getInitData({ data });
+
+  return (
+    <div className="entire">
+      {info.map((cluster: Cluster) => {
+        return (
+          <div className="cluster" key={cluster.id}>
+            {cluster.commits.map((commit: Commit) => {
+              return (
+                <p className="commit" key={commit.commitId}>
+                  <span className="nameBox">
+                    {commit.authorNames.map((authorName: Author) => {
+                      return (
+                        <span
+                          key={authorName.id}
+                          className="name"
+                          data-tooltip-text={authorName.name}
+                        >
+                          {authorName.name.slice(0, 1)}
+                        </span>
+                      );
+                    })}
+                  </span>
+                  <span className="message">{commit.message}</span>
+                </p>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Summary;

packages/view/src/components/VerticalClusterList/Summary/Summary.type.ts

@@ -0,0 +1,15 @@
+export type Author = {
+  id: string;
+  name: string;
+};
+
+export type Commit = {
+  commitId: string;
+  authorNames: Array<Author>;
+  message: string;
+};
+
+export type Cluster = {
+  id: string;
+  commits: Array<Commit>;
+};

packages/view/src/components/VerticalClusterList/Summary/Summary.util.ts

@@ -0,0 +1,41 @@
+import { nanoid } from "nanoid";
+import type { GlobalProps } from "types/global";
+
+import type { CommitNode } from "types/NodeTypes.temp";
+
+import type { Cluster, Commit } from ".";
+
+export function getInitData({ data }: GlobalProps) {
+  const clusters: Cluster[] = [];
+
+  data.map((clusterNode) => {
+    const cluster: Cluster = {
+      id: nanoid(),
+      commits: [],
+    };
+
+    const commitArray: Commit[] = [];
+
+    clusterNode.commitNodeList.map((commitNode: CommitNode) => {
+      const temp = {
+        commitId: commitNode.commit.id,
+        authorNames: commitNode.commit.author.names.map((name) => ({
+          id: nanoid(),
+          name: name.trim(),
+        })),
+        message: commitNode.commit.message,
+      };
+
+      commitArray.push(temp);
+
+      cluster.commits = commitArray;
+
+      return temp;
+    });
+
+    clusters.push(cluster);
+    return cluster;
+  });
+
+  return clusters;
+}

packages/view/src/components/VerticalClusterList/Summary/index.ts

@@ -0,0 +1,3 @@
+export { default as Summary } from "./Summary";
+export type { Commit, Cluster, Author } from "./Summary.type";
+export { getInitData } from "./Summary.util";

packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx

@@ -3,10 +3,13 @@ import "./VerticalClusterList.scss";
 
 import { ClusterGraph } from "components/VerticalClusterList/ClusterGraph";
 
+import { Summary } from "./Summary";
+
 const VerticalClusterList = ({ data }: GlobalProps) => {
   return (
     <div className="vertical-cluster-list">
       <ClusterGraph data={data} />
+      <Summary data={data} />
     </div>
   );
 };