From e00650891d6390ad79fba75e1aec8c4e83c58fa0 Mon Sep 17 00:00:00 2001
From: profjellybean <valentin.cello@gmail.com>
Date: Fri, 23 Dec 2022 13:29:24 +0100
Subject: [PATCH] #59: Made list of changings in config, fixed bug with tree

Bug: Filetree creation was false
---
 .../file-tree-comparison/chart/chart.js       |  4 +-
 .../file-tree-comparison/chart/index.js       | 12 +++--
 .../file-tree-comparison/components/tree.css  |  2 -
 .../file-tree-comparison/components/tree.js   |  3 +-
 .../legacy/file-tree-comparison/config.css    | 19 +++++++
 .../legacy/file-tree-comparison/config.js     | 54 +++++++++++++++----
 .../file-tree-comparison/reducers/config.js   | 17 ++++++
 .../file-tree-comparison/reducers/data.js     |  5 ++
 .../file-tree-comparison/sagas/index.js       | 17 +++---
 9 files changed, 105 insertions(+), 28 deletions(-)

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 17ab9c73..477a2ad1 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
@@ -147,6 +147,7 @@ export default class Changes extends React.Component {
     });
     const changed = { add: additions, edit: edited, delete: deletions };
     this.setState({ tree1: tree1H, tree2: tree2H, changed: changed });
+    this.props.onSetChanged(changed);
   }
 }
 function getEdits(fromSha, toSha, commits) {
@@ -178,10 +179,9 @@ function getTreeCommitspan(toSha, commits) {
   }
   const fileTree = [];
   const commitRadius = commits.slice(0, commits.findIndex((e) => e.sha === toSha) + 1);
-
   commitRadius.forEach((commit) => {
     commit.files.data.forEach((f) => {
-      if (f.stats.additions === f.lineCount) {
+      if (f.stats.additions > f.stats.deletions) {
         if (!fileTree.includes(f.file.path)) {
           fileTree.push(f.file.path);
         }
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js b/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js
index b645df25..e64e7dde 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js
@@ -2,6 +2,7 @@
 
 import { connect } from 'react-redux';
 import Chart from './chart.js';
+import { setCommit1, setCommit2, setTree1, setTree2, setChanged } from '/ui/src/visualizations/legacy/file-tree-comparison/sagas';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   const corState = state.visualizations.fileTreeComparison.state;
@@ -14,9 +15,12 @@ const mapStateToProps = (state /*, ownProps*/) => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-  };
-};
+const mapDispatchToProps = (dispatch) => ({
+  onSetCommit1: (commit) => dispatch(setCommit1(commit)),
+  onSetCommit2: (commit) => dispatch(setCommit2(commit)),
+  onSetTree1: (tree) => dispatch(setTree1(tree)),
+  onSetTree2: (tree) => dispatch(setTree2(tree)),
+  onSetChanged: (changes) => dispatch(setChanged(changes)),
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(Chart);
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css b/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css
index 85758d85..a0fd3811 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css
+++ b/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css
@@ -17,13 +17,11 @@
 }
 
 li:not(:last-child) {
-  margin-bottom: 5px;
   margin-left: 5px;
   width: fit-content;
   padding: 2px;
 }
 li:last-child {
-  margin-bottom: 5px;
   margin-left: 5px;
   width: fit-content;
   padding: 2px;
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/components/tree.js b/ui/src/visualizations/legacy/file-tree-comparison/components/tree.js
index 7b7f4085..85206fcb 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/components/tree.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/components/tree.js
@@ -10,6 +10,7 @@ export default class Tree extends React.PureComponent {
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
+    console.log(nextProps);
     this.setState({
       tree: nextProps.files,
     });
@@ -50,7 +51,7 @@ class TreeNode extends React.PureComponent {
             if (x.mark === 'Addition' || x.mark === 'Deletion' || x.mark === 'Edit') {
               return (
                 <div key={x.name.toString()} className={styles.space}>
-                  <button onClick={event => {
+                  <button  onClick={event => {
                     const target = event.currentTarget;
                     const panel = target.nextSibling;
                     panel.hidden = !panel.hidden;
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.css b/ui/src/visualizations/legacy/file-tree-comparison/config.css
index 27271d19..4d6391f2 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/config.css
+++ b/ui/src/visualizations/legacy/file-tree-comparison/config.css
@@ -8,6 +8,10 @@
   display: flex;
   flex-flow: wrap;
 }
+.info {
+  align-self: flex-end;
+  max-width: 400px;
+}
 hr {
   flex-basis: 100%;
   height: 0 !important;
@@ -34,3 +38,18 @@ hr {
   width: 25px;
   margin-right: 10px;
 }
+.files{
+  font-size: smaller;
+  overflow-y: auto;
+  max-height: 25em;
+  overflow-x: auto;
+}
+.listStyle {
+  list-style-type: disc;
+  margin-left: 15px;
+
+}
+.listStyle li{
+  word-wrap: break-word;
+  width: auto !important;
+}
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.js b/ui/src/visualizations/legacy/file-tree-comparison/config.js
index c680ce76..520d5104 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/config.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/config.js
@@ -3,28 +3,62 @@
 import { connect } from 'react-redux';
 import style from './config.css';
 const mapStateToProps = (state /*, ownProps*/) => {
-  const fileTreeState = state.visualizations.fileTreeComparison.state.data;
-  console.log(fileTreeState);
-  return {
-    //changed: fileTreeState.changed,
-    //commits: fileTreeState.commits,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
+  const fileTreeState = state.visualizations.fileTreeComparison.state;
   return {
+    changed: fileTreeState.config.changed,
   };
 };
 
+const mapDispatchToProps = (dispatch) => {};
 
 const ChangesConfigComponent = (props) => {
   return (
-    <div className={style.legend}>
+    <div className={style.info}>
+      <div className={style.files}>
+        <div hidden={props.changed.add.length === 0}>
+          <div>
+            <b>Additions:</b>
+          </div>
+          <div>
+            <ul className={style.listStyle}>
+              {props.changed.add.map((f, i) => {
+                return <li key={i}>{f}</li>;
+              })}
+            </ul>
+          </div>
+        </div>
+        <div hidden={props.changed.delete.length === 0}>
+          <div>
+            <b>Deletions:</b>
+          </div>
+          <div>
+            <ul className={style.listStyle}>
+              {props.changed.delete.map((f, i) => {
+                return <li key={i}>{f}</li>;
+              })}
+            </ul>
+          </div>
+        </div>
+        <div hidden={props.changed.edit.length === 0}>
+          <div>
+            <b>Modifications:</b>
+          </div>
+          <div>
+            <ul className={style.listStyle}>
+              {props.changed.edit.map((f, i) => {
+                return <li key={i}>{f}</li>;
+              })}
+            </ul>
+          </div>
+        </div>
+      </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>
+    </div>
   );
 };
 
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js b/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js
index dc8983cf..f9a573d9 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js
@@ -13,11 +13,28 @@ export default handleActions(
       _.assign({}, state, {
         commit2: action.payload ? action.payload : null,
       }),
+    SET_TREE_1: (state, action) =>
+      _.assign({}, state, {
+        tree1: action.payload ? action.payload : null,
+      }),
+    SET_TREE_2: (state, action) =>
+      _.assign({}, state, {
+        tree2: action.payload ? action.payload : null,
+      }),
+    SET_CHANGED: (state, action) =>
+      _.assign({}, state, {
+        changed: action.payload ? action.payload : null,
+      }),
   },
   {
     commit1: [],
     commit2: [],
     tree1: [],
     tree2: [],
+    changed: {
+      add: [],
+      delete: [],
+      edit: [],
+    },
   }
 );
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/reducers/data.js b/ui/src/visualizations/legacy/file-tree-comparison/reducers/data.js
index 6bf90d1e..c64853a6 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/reducers/data.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/reducers/data.js
@@ -18,6 +18,11 @@ export default handleActions(
     data: [
       {
         commits: [],
+        changed: {
+          add: [],
+          delete: [],
+          edit: [],
+        },
       },
     ],
     lastFetched: null,
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js b/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js
index 8ead0102..56729922 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js
@@ -9,6 +9,9 @@ export const receiveCommitsAndFileTree = timestampedActionFactory('RECEIVE_COMMI
 export const receiveCommitsAndFileTreeError = createAction('RECEIVE_COMMITS');
 export const setCommit1 = createAction('SET_COMMIT_1', (f) => f);
 export const setCommit2 = createAction('SET_COMMIT_2', (f) => f);
+export const setTree1 = createAction('SET_TREE_1', (f) => f);
+export const setTree2 = createAction('SET_TREE_2', (f) => f);
+export const setChanged = createAction('SET_CHANGED', (f) => f);
 
 export default function* () {
   // fetch data once on entry
@@ -22,16 +25,12 @@ export const fetchFileTreeEvolutionData = fetchFactory(
     const firstCommitTimestamp = Date.parse(firstCommit.date);
     const lastCommitTimestamp = Date.parse(lastCommit.date);
 
-    const commits = yield Database.getCommitsWithFileTree([firstCommitTimestamp, lastCommitTimestamp], [firstCommitTimestamp, lastCommitTimestamp]); //COMMITS
-    //const fileTree = yield Database.requestFileStructure();
-    //console.log(yield Database.searchCommits('Bug')); //search commits
+    const commits = yield Database.getCommitsWithFileTree(
+      [firstCommitTimestamp, lastCommitTimestamp],
+      [firstCommitTimestamp, lastCommitTimestamp]
+    ); //COMMITS
 
-    //let fileTreeInTimeSpan = buildTimespanSpecificFileTree(null, commits[100].sha, commits);
-    //console.log(fileTreeInTimeSpan);
-    //const h = makeHierarchyFileTree(fileTreeInTimeSpan);
-    //console.log(h);
-
-    return { commits: commits, tree: null };
+    return { commits: commits };
   },
   requestCommitsAndFileTree,
   receiveCommitsAndFileTree,