From 49fe50e7140c5a6da99137575e398cb7e08f1b4e Mon Sep 17 00:00:00 2001
From: profjellybean <valentin.cello@gmail.com>
Date: Sun, 18 Dec 2022 09:36:04 +0100
Subject: [PATCH] #59: Made functionality for edited files

Tree is now not hidden if file is edited, deleted or added, new color for edit
---
 .../file-tree-comparison/chart/chart.js       | 68 +++++++++++--------
 .../file-tree-comparison/components/tree.css  |  8 ++-
 .../file-tree-comparison/components/tree.js   | 34 +++++-----
 3 files changed, 64 insertions(+), 46 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 22be7b05..b3e759ca 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
@@ -134,10 +134,10 @@ export default class Changes extends React.Component {
     const tree2 = getTreeCommitspan(c2.sha, this.state.commits);
     let tree1H = makeHierarchyFileTree(tree1);
     let tree2H = makeHierarchyFileTree(tree2);
+    const edited = getEdits(c1.sha, c2.sha, this.state.commits);
 
     tree1.forEach((path) => {
       if (!tree2.includes(path)) {
-        console.log('Tree1 Deletion of ' + path);
         markChild(tree1H, path, 'Deletion');
       }
     });
@@ -147,45 +147,57 @@ export default class Changes extends React.Component {
         markChild(tree2H, path, 'Addition');
       }
     });
+    edited.forEach((path) => {
+      markChild(tree2H, path, 'Edit');
+    });
     this.setState({ tree2: tree2H });
   }
 }
 
+function getEdits(fromSha, toSha, commits) {
+  console.log('getEdits');
+  const edited = [];
+
+  const commitRadius = commits.slice(
+    commits.findIndex((e) => e.sha === fromSha),
+    commits.findIndex((e) => e.sha === toSha)
+  );
+
+  commitRadius.forEach((commit) => {
+    commit.files.data.forEach((file) => {
+      if (
+        (file.stats.additions > 0 || file.stats.deletions > 0) &&
+        file.lineCount !== file.stats.additions &&
+        file.lineCount !== file.stats.deletions
+      ) {
+        edited.push(file.file.path);
+      }
+    });
+  });
+  return edited;
+}
+
 function getTreeCommitspan(toSha, commits) {
   console.log('getTreeCommitSpan');
   if (toSha === undefined || commits === undefined) {
     return null;
   }
   const fileTree = [];
+  const commitRadius = commits.slice(0, commits.findIndex((e) => e.sha === toSha) + 1);
 
-  for (let i = 0; i < commits.length; i++) {
-    if (commits[i].sha !== toSha) {
-      commits[i].files.data.forEach((f) => {
-        if (f.stats.additions === f.lineCount) {
-          if (!fileTree.includes(f.file.path)) {
-            fileTree.push(f.file.path);
-          }
-        }
-        if (f.stats.deletions > 0 && f.stats.additions === 0) {
-          fileTree.splice(fileTree.indexOf(f.file.path), 1);
+  commitRadius.forEach((commit) => {
+    commit.files.data.forEach((f) => {
+      if (f.stats.additions === f.lineCount) {
+        if (!fileTree.includes(f.file.path)) {
+          fileTree.push(f.file.path);
         }
-      });
-    } else {
-      console.log(commits[i]);
-      commits[i].files.data.forEach((f) => {
-        if (f.stats.additions === f.lineCount) {
-          if (!fileTree.includes(f.file.path)) {
-            fileTree.push(f.file.path);
-          }
-        }
-        if (f.stats.deletions > 0 && f.stats.additions === 0) {
-          fileTree.splice(fileTree.indexOf(f.file.path), 1);
-        }
-      });
-      console.log(fileTree);
-      return fileTree;
-    }
-  }
+      }
+      if (f.stats.deletions === f.lineCount) {
+        fileTree.splice(fileTree.indexOf(f.file.path), 1);
+      }
+    });
+  });
+
   return fileTree;
 }
 function markChild(tree, path, mode) {
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 eb0ab93c..fb4ec2eb 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css
+++ b/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css
@@ -3,9 +3,13 @@
 }
 
 .addition {
-  background-color: #28cd41;
+  color: #28cd41;
 }
 
 .deletion {
-  background-color: #ff453a;
+  color: #ff453a;
+}
+
+.edit {
+  color: #bd981d;
 }
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 b2581fe8..7f624273 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/components/tree.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/components/tree.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './tree.css';
+import Button from 'react-bootstrap/Button';
 
 export default class Tree extends React.PureComponent {
   constructor(props) {
@@ -39,48 +40,49 @@ class TreeNode extends React.PureComponent {
               if(x.mark === 'Deletion'){
                 return <li className={styles.deletion} key={x.name.toString()}>{x.name}</li>;
               }
+              if(x.mark === 'Edit'){
+                return <li className={styles.edit} key={x.name.toString()}>{x.name}</li>;
+              }
             } else {
             return <li key={x.name.toString()}>{x.name}</li>;
           }
 
           } else {
-            if(x.mark === 'Addition'){
+            if (x.mark === 'Addition' || x.mark === 'Deletion' || x.mark === 'Edit') {
               return (
                 <div key={x.name.toString()}>
-                  <button className={styles.addition} onClick={event => {
+                  <Button onClick={event => {
                     const target = event.currentTarget;
                     const panel = target.nextSibling;
-                    if(panel.hidden){
-                      panel.hidden = false;
-                    } else {
-                      panel.hidden = true;
-                    }
+                    panel.hidden = !panel.hidden;
                   }
-                  }>{x.name}</button>
-                  <ul hidden={h} className={styles.nested}>
+                  }>{x.name}</Button>
+                  <ul hidden={false} className={styles.nested}>
                     <TreeNode node={x.children}/>
                   </ul>
                 </div>
               );
             }
-            return (
+            else {
+              return (
               <div key={x.name.toString()}>
-                <button onClick={event => {
+                <Button onClick={event => {
                   const target = event.currentTarget;
                   const panel = target.nextSibling;
-                  if(panel.hidden){
+                  if (panel.hidden) {
                     panel.hidden = false;
                   } else {
                     panel.hidden = true;
                   }
                 }
-                }>{x.name}</button>
-                  <ul hidden={h} className={styles.nested}>
-                    <TreeNode node={x.children}/>
-                  </ul>
+                }>{x.name}</Button>
+                <ul hidden={h} className={styles.nested}>
+                  <TreeNode node={x.children}/>
+                </ul>
               </div>
             );
           }
+          }
       })
       );
     }