fix(view): fix summary issue #146 (#151)

* chore(view): Run `npm install`

* chore(view): Run `npm install`

* fix(view): fix summary issues #146

* fix(view): modify each node height

* fix(view): modify author background color #102

* fix(view): modify long commit message

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

@@ -1,9 +1,27 @@
 export const authorBgColorArray = [
-  "00ADF7",
-  "0077AA",
-  "4AC3F7",
-  "0BD9E0",
-  "33C2FF",
-  "4BC4F9",
-  "0089C4",
+  // "00ADF7",
+  // "0077AA",
+  // "4AC3F7",
+  // "0BD9E0",
+  // "33C2FF",
+  // "4BC4F9",
+  // "0089C4",
+
+  "0077aa",
+  "1a85b3",
+  "3392bb",
+  "4da0c4",
+  "66adcc",
+
+  "0a5ac2",
+  "236bc8",
+  "3b7bce",
+  "548cd4",
+  "6c9cda",
+
+  "33c2ff",
+  "2eafe6",
+  "299bcc",
+  "2488b3",
+  "1f7499",
 ];

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

@@ -7,9 +7,9 @@
 }
 
 @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);
+  -webkit-box-shadow: 0px 0px 3px 1px rgba(100, 100, 100, 0.4);
+  -moz-box-shadow: 0px 0px 3px 1px rgba(100, 100, 100, 0.4);
+  box-shadow: 0px 0px 3px 1px rgba(100, 100, 100, 0.4);
 }
 
 @mixin border($border--radius) {
@@ -31,19 +31,19 @@
 .summary__entire {
   width: 85%;
   margin-left: 20px;
+  margin-top: 5px;
 
   .cluster {
     align-items: center;
     width: 85%;
-    padding: 10px 0;
+    padding: 5px 0;
   }
 
   .summary {
     display: flex;
     align-items: center;
     flex-direction: row;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding: 5px 0;
   }
 
   .nameBox {
@@ -106,7 +106,7 @@
 
       color: #ffffff;
       font-size: 12px;
-      padding: 7px 12px;
+      padding: 0px 12px;
       margin-bottom: 10px;
       width: auto;
       min-width: max-content;
@@ -118,17 +118,18 @@
 
     &:hover::after {
       left: 100%;
-      background-color: rgba(34, 34, 34, 0.8);
+      background-color: rgba(0, 119, 170, 0.8);
       opacity: 1;
     }
   }
 
-  .keywords {
+  .contents {
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin-left: 15px;
+    cursor: pointer;
   }
 
   .keyword {

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

@@ -6,7 +6,7 @@ import { Detail } from "components";
 import { selectedDataUpdater } from "../VerticalClusterList.util";
 
 import { AuthorName } from "./AuthorName";
-import type { Cluster, Keyword } from "./Summary.type";
+import type { Cluster } from "./Summary.type";
 import { getClusterById, getInitData } from "./Summary.util";
 
 import "./Summary.scss";
@@ -51,21 +51,14 @@ const Summary = ({ data, selectedData, setSelectedData }: SummaryProps) => {
                     }
                   )}
                 </span>
-                <span className="keywords">
-                  {cluster.summary.keywords.map((keywordObj: Keyword) => {
-                    let size = "small";
-                    if (keywordObj.count > 3) size = "medium";
-                    if (keywordObj.count > 6) size = "large";
-
-                    return (
-                      <span
-                        key={`${cluster.clusterId}-${keywordObj.keyword}`}
-                        className={["keyword", size].join(" ")}
-                      >
-                        {keywordObj.keyword}
-                      </span>
-                    );
-                  })}
+                <span className="contents">
+                  {`${cluster.summary.content.message.slice(0, 70)} ${
+                    cluster.summary.content.message.length > 70 ? "..." : ""
+                  } ${
+                    cluster.summary.content.count > 0
+                      ? `+ ${cluster.summary.content.count} more`
+                      : ""
+                  } `}
                 </span>
               </p>
             </div>

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

@@ -3,9 +3,14 @@ export type Keyword = {
   count: number;
 };
 
+export type Content = {
+  message: string;
+  count: number;
+};
+
 export type Summary = {
   authorNames: Array<Array<string>>;
-  keywords: Array<Keyword>;
+  content: Content;
 };
 
 export type Cluster = {

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

@@ -9,11 +9,26 @@ export function getInitData({ data }: GlobalProps) {
   const clusters: Cluster[] = [];
 
   data.map((clusterNode) => {
+    const { message } =
+      clusterNode.commitNodeList[clusterNode.commitNodeList.length - 1].commit;
+
+    let resultMsg =
+      message.indexOf("/n/n", 0) > -1
+        ? message.slice(0, message.indexOf("/n/n", 0))
+        : message;
+    resultMsg =
+      resultMsg.indexOf("/n", 0) > -1
+        ? resultMsg.slice(0, message.indexOf("/n", 0))
+        : resultMsg;
+
     const cluster: Cluster = {
       clusterId: clusterNode.commitNodeList[0].clusterId,
       summary: {
         authorNames: [],
-        keywords: [],
+        content: {
+          message: resultMsg,
+          count: clusterNode.commitNodeList.length - 1,
+        },
       },
     };
 
@@ -27,23 +42,6 @@ export function getInitData({ data }: GlobalProps) {
 
       cluster.summary.authorNames.push(Array.from(authorSet));
 
-      // set keywords
-      const keywordObject = {
-        keyword: commitNode.commit.message.split(" ")[0],
-        count: 1,
-      };
-
-      const findKeywordIndex = cluster.summary.keywords.findIndex(
-        (key) => key.keyword === commitNode.commit.message.split(" ")[0]
-      );
-
-      if (findKeywordIndex === -1) cluster.summary.keywords.push(keywordObject);
-      else {
-        cluster.summary.keywords[findKeywordIndex].count += 1;
-      }
-
-      cluster.summary.keywords.sort((a, b) => b.count - a.count);
-
       return commitNode;
     });