From 350d10e4fbc200c758c063f9f3a228b27c66e238 Mon Sep 17 00:00:00 2001
From: Chaen <cw06155@gmail.com>
Date: Fri, 2 Aug 2024 13:36:36 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"fix(view):=20=EA=B0=81=20content=20ti?=
 =?UTF-8?q?tle=20=EC=88=98=EC=A0=95"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/view/src/App.scss                    |  3 +--
 packages/view/src/App.tsx                     | 10 ++++++-
 .../FilteredAuthors/FilteredAuthors.scss      | 11 +++-----
 .../FilteredAuthors/FilteredAuthors.tsx       | 27 +++++++++----------
 .../FileIcicleSummary/FileIcicleSummary.tsx   |  2 +-
 .../src/components/Statistics/Statistics.scss |  1 +
 .../VerticalClusterList.scss                  |  6 +----
 .../VerticalClusterList.tsx                   |  9 ++-----
 8 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/packages/view/src/App.scss b/packages/view/src/App.scss
index 4b5237be..e668d0b2 100644
--- a/packages/view/src/App.scss
+++ b/packages/view/src/App.scss
@@ -35,6 +35,5 @@ body {
   display: grid;
   grid-template-columns: 4fr 1fr;
   height: calc(100vh - 200px);
-
-  padding: 20px;
+  margin-top: 20px;
 }
diff --git a/packages/view/src/App.tsx b/packages/view/src/App.tsx
index 0949362a..29e5da71 100644
--- a/packages/view/src/App.tsx
+++ b/packages/view/src/App.tsx
@@ -3,7 +3,14 @@ import { container } from "tsyringe";
 import { useEffect, useRef } from "react";
 import BounceLoader from "react-spinners/BounceLoader";
 
-import { BranchSelector, Statistics, TemporalFilter, ThemeSelector, VerticalClusterList } from "components";
+import {
+  BranchSelector,
+  Statistics,
+  TemporalFilter,
+  ThemeSelector,
+  VerticalClusterList,
+  FilteredAuthors,
+} from "components";
 import "./App.scss";
 import type IDEPort from "ide/IDEPort";
 import { useGlobalData } from "hooks";
@@ -58,6 +65,7 @@ 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 53d4b689..c81bd9f9 100644
--- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
+++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
@@ -1,12 +1,9 @@
 .selected-container {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  width: 100%;
-}
-
-.selected-content {
+  position: relative;
+  top: 30px;
   display: flex;
   flex-wrap: wrap;
+  width: 100%;
+  padding: 4px 6px;
   box-sizing: border-box;
 }
diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
index 38c0763b..f0b0ea7c 100644
--- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
+++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
@@ -12,21 +12,18 @@ const FilteredAuthors = () => {
 
   return (
     <div className="selected-container">
-      {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>
+      {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>
   );
 };
diff --git a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx
index e612df46..24d2b5cf 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 Summary</p>
+      <p>File Icicle Summary</p>
       <svg ref={$summary} />
     </div>
   );
diff --git a/packages/view/src/components/Statistics/Statistics.scss b/packages/view/src/components/Statistics/Statistics.scss
index 87324f57..9d3c92d0 100644
--- a/packages/view/src/components/Statistics/Statistics.scss
+++ b/packages/view/src/components/Statistics/Statistics.scss
@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   gap: 5vh;
+  padding: 20px;
   width: 350px;
   overflow-y: scroll;
 }
diff --git a/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss b/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss
index 867c5c35..cfee46ed 100644
--- a/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss
+++ b/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss
@@ -1,10 +1,6 @@
 .vertical-cluster-list {
   display: flex;
-  flex-direction: column;
-}
-
-.vertical-cluster-list__content {
-  display: flex;
+  flex-direction: row;
   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 5b193476..341ef606 100644
--- a/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
+++ b/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
@@ -1,18 +1,13 @@
 import "./VerticalClusterList.scss";
 
-import { FilteredAuthors } from "components/FilteredAuthors";
-
 import { ClusterGraph } from "./ClusterGraph";
 import { Summary } from "./Summary";
 
 const VerticalClusterList = () => {
   return (
     <div className="vertical-cluster-list">
-      <FilteredAuthors />
-      <div className="vertical-cluster-list__content">
-        <ClusterGraph />
-        <Summary />
-      </div>
+      <ClusterGraph />
+      <Summary />
     </div>
   );
 };