From 96f495249181630af15897dc0f38767296872879 Mon Sep 17 00:00:00 2001
From: xxxjinn <tlsguswls319@naver.com>
Date: Thu, 1 Aug 2024 23:01:30 +0900
Subject: [PATCH 1/4] refactor: rename title (file icicle summary -> file
 summary)

---
 .../Statistics/FileIcicleSummary/FileIcicleSummary.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx
index 24d2b5cf..e612df46 100644
--- a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx
+++ b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx
@@ -137,7 +137,7 @@ const FileIcicleSummary = () => {
 
   return (
     <div className="file-icicle-summary">
-      <p>File Icicle Summary</p>
+      <p>File Summary</p>
       <svg ref={$summary} />
     </div>
   );

From 1e5b0cc98c5e542f6d59acd6cd3713fa2bc49b94 Mon Sep 17 00:00:00 2001
From: xxxjinn <tlsguswls319@naver.com>
Date: Thu, 1 Aug 2024 23:40:57 +0900
Subject: [PATCH 2/4] style: edit padding middle container

---
 packages/view/src/App.scss                              | 3 ++-
 packages/view/src/components/Statistics/Statistics.scss | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/view/src/App.scss b/packages/view/src/App.scss
index e668d0b2..4b5237be 100644
--- a/packages/view/src/App.scss
+++ b/packages/view/src/App.scss
@@ -35,5 +35,6 @@ body {
   display: grid;
   grid-template-columns: 4fr 1fr;
   height: calc(100vh - 200px);
-  margin-top: 20px;
+
+  padding: 20px;
 }
diff --git a/packages/view/src/components/Statistics/Statistics.scss b/packages/view/src/components/Statistics/Statistics.scss
index 9d3c92d0..87324f57 100644
--- a/packages/view/src/components/Statistics/Statistics.scss
+++ b/packages/view/src/components/Statistics/Statistics.scss
@@ -3,7 +3,6 @@
   flex-direction: column;
   align-items: center;
   gap: 5vh;
-  padding: 20px;
   width: 350px;
   overflow-y: scroll;
 }

From 0283110c19a0c2e1b0cec14d1735d105e0cfd006 Mon Sep 17 00:00:00 2001
From: xxxjinn <tlsguswls319@naver.com>
Date: Thu, 1 Aug 2024 23:41:50 +0900
Subject: [PATCH 3/4] refactor: move FilteredAuthors into VerticalClusterList

---
 packages/view/src/App.tsx                              | 10 +---------
 .../components/FilteredAuthors/FilteredAuthors.scss    |  4 +---
 .../VerticalClusterList/VerticalClusterList.scss       |  6 +++++-
 .../VerticalClusterList/VerticalClusterList.tsx        |  9 +++++++--
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/view/src/App.tsx b/packages/view/src/App.tsx
index 29e5da71..0949362a 100644
--- a/packages/view/src/App.tsx
+++ b/packages/view/src/App.tsx
@@ -3,14 +3,7 @@ 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";
@@ -65,7 +58,6 @@ const App = () => {
       </div>
       <div className="top-container">
         <TemporalFilter />
-        <FilteredAuthors />
       </div>
       <div className="middle-container">
         {filteredData.length !== 0 ? (
diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
index c81bd9f9..4dabe4a3 100644
--- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
+++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
@@ -1,9 +1,7 @@
 .selected-container {
-  position: relative;
-  top: 30px;
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  padding: 4px 6px;
+  padding: 6px;
   box-sizing: border-box;
 }
diff --git a/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss b/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss
index cfee46ed..867c5c35 100644
--- a/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss
+++ b/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss
@@ -1,6 +1,10 @@
 .vertical-cluster-list {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+}
+
+.vertical-cluster-list__content {
+  display: flex;
   height: 100%;
   overflow-x: hidden;
   overflow-y: scroll;
diff --git a/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx b/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
index 341ef606..5b193476 100644
--- a/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
+++ b/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
@@ -1,13 +1,18 @@
 import "./VerticalClusterList.scss";
 
+import { FilteredAuthors } from "components/FilteredAuthors";
+
 import { ClusterGraph } from "./ClusterGraph";
 import { Summary } from "./Summary";
 
 const VerticalClusterList = () => {
   return (
     <div className="vertical-cluster-list">
-      <ClusterGraph />
-      <Summary />
+      <FilteredAuthors />
+      <div className="vertical-cluster-list__content">
+        <ClusterGraph />
+        <Summary />
+      </div>
     </div>
   );
 };

From 7d0498211c1c3aceebfb731441a161cb9388c48d Mon Sep 17 00:00:00 2001
From: xxxjinn <tlsguswls319@naver.com>
Date: Thu, 1 Aug 2024 23:48:27 +0900
Subject: [PATCH 4/4] feature: add authors title

---
 .../FilteredAuthors/FilteredAuthors.scss      |  9 +++++--
 .../FilteredAuthors/FilteredAuthors.tsx       | 27 ++++++++++---------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
index 4dabe4a3..53d4b689 100644
--- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
+++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
@@ -1,7 +1,12 @@
 .selected-container {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 15px;
   width: 100%;
-  padding: 6px;
+}
+
+.selected-content {
+  display: flex;
+  flex-wrap: wrap;
   box-sizing: border-box;
 }
diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
index f0b0ea7c..38c0763b 100644
--- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
+++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
@@ -12,18 +12,21 @@ const FilteredAuthors = () => {
 
   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) => (
+                <Author
+                  key={authorName}
+                  name={authorName}
+                  src={authSrcMap[authorName]}
+                />
+              ));
+            });
+          })}
+      </div>
     </div>
   );
 };