#59: Added stylsheet for config, made legend

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;

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 });
   }

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;
+}

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>
   );
 };