#59: Moved file tree generation to chart

ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js

@@ -4,34 +4,108 @@ import React from 'react';
 import * as d3 from 'd3';
 
 import styles from '../styles.scss';
-import _ from 'lodash';
-
-import StackedAreaChart from '../../../../components/StackedAreaChart';
-import moment from 'moment';
-import chroma from 'chroma-js';
 
 export default class Changes extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      commits: this.props.commits,
+      commit1: {
+        messageHeader: '',
+      },
+      commit2: {
+        messageHeader: '',
+      },
+      tree1: null,
+      tree2: null,
+    };
   }
 
   render() {
-    console.log(this.props);
-    return(
+    return (
       <table className={styles.tableGeneral}>
         <thead>
-        <tr className={styles.headerCommits}>
-          <td>Commit 1</td>
-          <td className={styles.tdLine}>Commit 2</td>
-        </tr>
+          <tr className={styles.headerCommits}>
+            <td>{this.state.commit1.messageHeader}</td>
+            <td className={styles.tdLine}>{this.state.commit2.messageHeader}</td>
+          </tr>
         </thead>
         <tbody>
-        <tr className={styles.tableContent}>
-          <td>Test2</td>
-          <td className={styles.tdLine}>Test3</td>
-        </tr>
+          <tr className={styles.tableContent}>
+            <td className={styles.tdLine}>Test 2</td>
+            <td className={styles.tdLine}>Test3</td>
+          </tr>
         </tbody>
       </table>
     );
   }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.commit1 !== [] && nextProps.commit2 !== []) {
+      let tree1 = getTreeCommitspan(null, nextProps.commit1.sha, nextProps.commits);
+      tree1 = makeHierarchyFileTree(tree1);
+      let tree2 = getTreeCommitspan(nextProps.commit1.sha, nextProps.commit2.sha, nextProps.commits);
+      tree2 = makeHierarchyFileTree(tree2);
+      this.setState({
+        commits: nextProps.commits,
+        commit1: nextProps.commit1,
+        commit2: nextProps.commit2,
+        tree1: tree1,
+        tree2: tree2,
+      });
+    }
+  }
+}
+
+function getTreeCommitspan(fromSha, toSha, commits) {
+  if (toSha === undefined || fromSha === undefined || commits === undefined) {
+    return null;
+  }
+  const fileTree = [];
+  if (fromSha === null) {
+    commits.forEach((c) => {
+      if (c.sha === toSha) {
+        return fileTree;
+      }
+      c.files.data.forEach((f) => {
+        fileTree.push(f.file.path);
+      });
+    });
+  } else {
+    let mark = 0;
+    commits.forEach((c) => {
+      if (c.sha === fromSha) {
+        mark = 1;
+      }
+      if (c.sha === toSha) {
+        return fileTree;
+      }
+      if (mark === 1) {
+        c.files.data.forEach((f) => {
+          fileTree.push(f.file.path);
+        });
+      }
+    });
+  }
+  return fileTree;
+}
+
+function makeHierarchyFileTree(fileTree) {
+  if (fileTree === null || fileTree === undefined) {
+    return null;
+  }
+  const result = [];
+  const level = { result };
+
+  fileTree.forEach((entry) => {
+    entry.split('/').reduce((r, name) => {
+      if (!r[name]) {
+        r[name] = { result: [] };
+        r.result.push({ name, children: r[name].result });
+      }
+      return r[name];
+    }, level);
+  });
+
+  return result;
 }

ui/src/visualizations/legacy/file-tree-comparison/chart/index.js

@@ -2,75 +2,24 @@
 
 import { connect } from 'react-redux';
 import Chart from './chart.js';
-import { setTree1, setTree2 } from '../sagas';
+import { setCommit1, setCommit2 } from '../sagas';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   const corState = state.visualizations.fileTreeComparison.state;
-  let treeOne = getTreeCommitspan(null, corState.config.commit1.sha, corState.data.data.commits);
-  treeOne = makeHierarchyFileTree(treeOne);
-  setTree1(treeOne);
-  console.log(treeOne);
-
-  let treeTwo = getTreeCommitspan(corState.config.commit1.sha, corState.config.commit2.sha, corState.data.data.commits);
-  treeTwo = makeHierarchyFileTree(treeTwo);
-  setTree2(treeTwo);
-  console.log(treeTwo);
   return {
     commits: corState.data.data.commits,
+    commit1: corState.config.commit1,
+    commit2: corState.config.commit2,
+    tree1: corState.config.tree1,
+    tree2: corState.config.tree2,
   };
 };
 
-function getTreeCommitspan(fromSha, toSha, commits) {
-  if (toSha === undefined || fromSha === undefined || commits === undefined) {
-    return null;
-  }
-  const fileTree = [];
-  if (fromSha === null) {
-    commits.forEach((c) => {
-      if (c.sha === toSha) {
-        return fileTree;
-      }
-      c.files.data.forEach((f) => {
-        fileTree.push(f.file.path);
-      });
-    });
-  } else {
-    let mark = 0;
-    commits.forEach((c) => {
-      if (c.sha === fromSha) {
-        mark = 1;
-      }
-      if (c.sha === toSha) {
-        return fileTree;
-      }
-      if (mark === 1) {
-        c.files.data.forEach((f) => {
-          fileTree.push(f.file.path);
-        });
-      }
-    });
-  }
-  return fileTree;
-}
-
-function makeHierarchyFileTree(fileTree) {
-  if (fileTree === null || fileTree === undefined) {
-    return null;
-  }
-  const result = [];
-  const level = { result };
-
-  fileTree.forEach((entry) => {
-    entry.split('/').reduce((r, name) => {
-      if (!r[name]) {
-        r[name] = { result: [] };
-        r.result.push({ name, children: r[name].result });
-      }
-      return r[name];
-    }, level);
-  });
-
-  return result;
-}
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onSetCommit1: (commit) => dispatch(setCommit1(commit)),
+    onSetCommit2: (commit) => dispatch(setCommit2(commit)),
+  };
+};
 
-export default connect(mapStateToProps)(Chart);
+export default connect(mapStateToProps, mapDispatchToProps)(Chart);

ui/src/visualizations/legacy/file-tree-comparison/config.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import { connect } from 'react-redux';
-import { setCommit1, setCommit2 } from './sagas/index.js';
+import { setCommit1, setCommit2, setTree1, setTree2 } from './sagas/index.js';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   const fileTreeState = state.visualizations.fileTreeComparison.state.data.data;
@@ -16,10 +16,8 @@ const mapStateToProps = (state /*, ownProps*/) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    onSetCommit1: (commit) => {
-      dispatch(setCommit1(commit));
-    },
-    onSetCommit2: (commit) => dispatch(setCommit2(commit)),
+    onSetCommit1: (commit) => dispatch(setCommit1(commit)),
+    onSetCommit2: (commit) => dispatch(setCommit2(commit))
   };
 };
 
@@ -35,21 +33,22 @@ const ChangesConfigComponent = (props) => {
       <select
         value={props.commit1}
         onChange={(e) => {
-          props.onSetCommit1(props.commits[e.target.options.selectedIndex]);
+          props.onSetCommit1(props.commits[commits.length - e.target.options.selectedIndex - 1]);
         }}>
         {commits}
       </select>
-       <select
-         value={props.commit2}
-         onChange={(e) => {
-           props.onSetCommit2(props.commits[e.target.options.selectedIndex]);
-         }}>
-         {commits}
-       </select>
-     </div>
-   )
+      <select
+        value={props.commit2}
+        onChange={(e) => {
+          props.onSetCommit2(props.commits[commits.length - e.target.options.selectedIndex - 1]);
+        }}>
+        {commits}
+      </select>
+    </div>
+  );
 };
 
 const FileTreeConfig = connect(mapStateToProps, mapDispatchToProps)(ChangesConfigComponent);
 
 export default FileTreeConfig;
+

ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js

@@ -13,14 +13,6 @@ 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,
-      }),
   },
   {
     commit1: [],

ui/src/visualizations/legacy/file-tree-comparison/reducers/data.js

@@ -5,8 +5,8 @@ import _ from 'lodash';
 
 export default handleActions(
   {
-    REQUEST_COMMITS_AND_FILE_TREE: (state) => _.assign({}, state, { isFetching: true }),
-    RECEIVE_COMMITS_AND_FILE_TREE: (state, action) => {
+    REQUEST_COMMITS: (state) => _.assign({}, state, { isFetching: true }),
+    RECEIVE_COMMITS: (state, action) => {
       return _.assign({}, state, {
         data: action.payload,
         isFetching: false,
@@ -18,9 +18,6 @@ export default handleActions(
     data: [
       {
         commits: [],
-        tree: [],
-        commit1: [],
-        commit2: [],
       },
     ],
     lastFetched: null,

ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js

@@ -4,13 +4,11 @@ import { fetchFactory, timestampedActionFactory } from '../../../../sagas/utils'
 import { createAction } from 'redux-actions';
 import Database from '../../../../database/database';
 
-export const requestCommitsAndFileTree = createAction('REQUEST_COMMITS_AND_FILE_TREE');
-export const receiveCommitsAndFileTree = timestampedActionFactory('RECEIVE_COMMITS_AND_FILE_TREE');
-export const receiveCommitsAndFileTreeError = createAction('RECEIVE_COMMITS_AND_FILE_TREE_ERROR');
+export const requestCommitsAndFileTree = createAction('REQUEST_COMMITS');
+export const receiveCommitsAndFileTree = timestampedActionFactory('RECEIVE_COMMITS');
+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 default function* () {
   // fetch data once on entry