From f99e7d3c51c728100473346a60d8377b6689b0f7 Mon Sep 17 00:00:00 2001
From: profjellybean <valentin.cello@gmail.com>
Date: Fri, 23 Dec 2022 09:39:40 +0100
Subject: [PATCH] #59: Added stylsheet for config, made legend

---
 .../file-tree-comparison/chart/chart.css      |  4 ++
 .../file-tree-comparison/chart/chart.js       | 10 ++---
 .../legacy/file-tree-comparison/config.css    | 37 +++++++++++++++++++
 .../legacy/file-tree-comparison/config.js     | 15 ++++++--
 4 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/config.css

diff --git a/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.css b/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.css
index ca0b0782..733e55e7 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.css
+++ b/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.css
@@ -22,6 +22,10 @@ table td, table th {
   padding: 10px;
 }
 
+.name {
+  margin-left: 10px;
+}
+
 .flex {
   padding: 10px;
   display: flex;
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js b/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
index e448e76b..17ab9c73 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
@@ -38,7 +38,7 @@ export default class Changes extends React.Component {
               onChange={(e) => {
                 this.calculateValues(e.value, null);
                 this.setState({ commitsToChoose2: this.buildingSelect(this.state.commits, e.value.date) });
-              }}></Select> <div hidden={this.state.commit1.date === ''}>{this.state.commit1.signature.split('<')[0].trim() + ', ' + this.state.commit1.date.substring(0, 10)}</div></div>
+              }}></Select> <div className={styles.name} hidden={this.state.commit1.date === ''}>{this.state.commit1.signature.split('<')[0].trim() + ', ' + this.state.commit1.date.substring(0, 10)}</div></div>
           </th>
           <th>
             <div className={styles.flex}>
@@ -48,7 +48,7 @@ export default class Changes extends React.Component {
               options={this.state.commitsToChoose2}
               onChange={(e) => {
                 this.calculateValues(null, e.value);
-              }}></Select><div hidden={this.state.commit2.date === ''}>{this.state.commit2.signature.split('<')[0].trim() + ', ' + this.state.commit2.date.substring(0, 10)}</div></div>
+              }}></Select><div className={styles.name} hidden={this.state.commit2.date === ''}>{this.state.commit2.signature.split('<')[0].trim() + ', ' + this.state.commit2.date.substring(0, 10)}</div></div>
           </th>
         </thead>
         <tbody>
@@ -136,15 +136,15 @@ export default class Changes extends React.Component {
         deletions.push(path);
       }
     });
+    edited.forEach((path) => {
+      markChild(tree2H, path, 'Edit');
+    });
     tree2.forEach((path) => {
       if (!tree1.includes(path)) {
         markChild(tree2H, path, 'Addition');
         additions.push(path);
       }
     });
-    edited.forEach((path) => {
-      markChild(tree2H, path, 'Edit');
-    });
     const changed = { add: additions, edit: edited, delete: deletions };
     this.setState({ tree1: tree1H, tree2: tree2H, changed: changed });
   }
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.css b/ui/src/visualizations/legacy/file-tree-comparison/config.css
new file mode 100644
index 00000000..fa775504
--- /dev/null
+++ b/ui/src/visualizations/legacy/file-tree-comparison/config.css
@@ -0,0 +1,37 @@
+.legend {
+  padding: 0;
+  position: absolute;
+  bottom: 0;
+  list-style: none;
+  border: 1px black;
+  overflow: hidden;
+  align-content: center;
+  display: flex;
+  flex-flow: wrap;
+}
+hr {
+  flex-basis: 100%;
+  height: 0 !important;
+  margin: 5px !important;
+  width: 100%;
+  background-color: white !important;
+}
+
+.add{
+  background-color: #00EE76;
+  height: 25px;
+  width: 25px;
+  margin-right: 10px;
+}
+.delete{
+  background-color: #ff453a;
+  height: 25px;
+  width: 25px;
+  margin-right: 10px;
+}
+.edit{
+  background-color: #bd981d;
+  height: 25px;
+  width: 25px;
+  margin-right: 10px;
+}
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.js b/ui/src/visualizations/legacy/file-tree-comparison/config.js
index 8aaf6474..c680ce76 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/config.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/config.js
@@ -1,11 +1,13 @@
 'use strict';
 
 import { connect } from 'react-redux';
-
+import style from './config.css';
 const mapStateToProps = (state /*, ownProps*/) => {
-  const fileTreeState = state.visualizations.fileTreeComparison.state.data.data;
+  const fileTreeState = state.visualizations.fileTreeComparison.state.data;
+  console.log(fileTreeState);
   return {
-    commits: fileTreeState.commits,
+    //changed: fileTreeState.changed,
+    //commits: fileTreeState.commits,
   };
 };
 
@@ -14,9 +16,14 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
+
 const ChangesConfigComponent = (props) => {
   return (
-    <div>
+    <div className={style.legend}>
+      <hr />
+      <div className={style.add}></div><div className={style.flexGrow}> Additions</div><hr/>
+      <div className={style.delete}></div><div className={style.flexGrow}> Deletions</div><hr/>
+      <div className={style.edit}></div><div className={style.flexGrow}> Modifications</div><hr/>
     </div>
   );
 };