#59: Made list of changings in config, fixed bug with tree

Bug: Filetree creation was false
INSO-TUWien · Dec 23, 2022 · e006508 · e006508
1 parent f77aea8
commit e006508
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,