#45 add basic commit slider to file-tree-evolution

ui/src/visualizations/file-tree-evolution/chart/CommitSlider.js

@@ -0,0 +1,28 @@
+'use strict';
+
+import React from 'react';
+
+import styles from '../styles.scss';
+
+export default class CommitSlider extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidUpdate() {
+  }
+
+  changeCommit(commit) {
+    this.props.onSelectedCommitChange(commit)
+  }
+
+  render() {
+    return (
+      <div className={styles.commitSlider}>
+        <label htmlFor="commits">Commits:</label>
+        <input id="commits" type="range" min="0" max={this.props.commits.length} onChange={(e) => this.changeCommit(e.target.value)}></input>
+        <span>{this.props.commits.length > this.props.selectedCommit ? this.props.commits[this.props.selectedCommit].message : ''}</span>
+      </div>
+    );
+  }
+}

ui/src/visualizations/file-tree-evolution/chart/Sunburst.js

@@ -14,22 +14,13 @@ export default class Sunburst extends React.Component {
     this.state = {};
   }
 
-  componentDidMount() {
-    // if (!!this.props.fileTreeHistory && this.props.fileTreeHistory.length > 0) {
-    //   this.createChart();
-    // }
-  }
-
   componentDidUpdate() {
     if (!!this.props.fileTreeHistory && this.props.fileTreeHistory.length > 0 && !this.initialized) {
       this.initialized = true
       this.createChart();
-      setInterval(() => !!this.props.fileTreeHistory[++this.index] ? this.update(this.props.fileTreeHistory[this.index], this.index) : undefined, this.settings.msBetweenIterations);
+    } else if (this.initialized) {
+      this.update(this.props.fileTreeHistory[this.props.selectedCommit], this.props.selectedCommit);
     }
-    // console.log(this.props)
-    // if(!!this.props.fileTreeHistory[++this.index]) {
-    //   this.update(this.props.fileTreeHistory[this.index], this.index)
-    // };
   }
 
   createChart() {

ui/src/visualizations/file-tree-evolution/chart/chart.js

@@ -5,6 +5,8 @@ import React from 'react';
 import _ from 'lodash';
 
 import Sunburst from './Sunburst';
+import CommitSlider from './CommitSlider';
+import styles from '../styles.scss';
 
 export default class FileTreeEvolution extends React.Component {
   constructor(props) {
@@ -14,13 +16,28 @@ export default class FileTreeEvolution extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     this.setState({
-      fileTreeHistory: nextProps.fileTreeHistory
+      fileTreeHistory: nextProps.fileTreeHistory,
+      commits: nextProps.commits,
+    });
+  }
+
+  changeSelectedCommit(commit) {
+    this.setState({
+      selectedCommit: commit
     });
   }
 
   render() {
-    return ( 
-      <Sunburst fileTreeHistory={this.props.fileTreeHistory} />
+    return (
+      <div>
+        <div className={styles.mainContainer}>
+          <CommitSlider 
+            commits={this.props.commits || []}
+            selectedCommit={this.state.selectedCommit || 0}
+            onSelectedCommitChange={commit => this.changeSelectedCommit(commit)} />
+          <Sunburst fileTreeHistory={this.props.fileTreeHistory} selectedCommit={this.state.selectedCommit} />
+        </div>
+      </div>
     );
   }
 }

ui/src/visualizations/file-tree-evolution/chart/index.js

@@ -6,7 +6,8 @@ import Chart from './chart.js';
 
 const mapStateToProps = (state) => {
   return {
-    fileTreeHistory: state.visualizations.fileTreeEvolution.state.data.data.fileTreeHistory || []
+    fileTreeHistory: state.visualizations.fileTreeEvolution.state.data.data.fileTreeHistory || [],
+    commits: state.visualizations.fileTreeEvolution.state.data.data.commits
   };
 };
 

ui/src/visualizations/file-tree-evolution/sagas/index.js

@@ -50,7 +50,7 @@ export const fetchFileTreeEvolutionData = fetchFactory(
       }
       return {
         fileTreeHistory,
-        commits: resp
+        commits: resp.commits.data
       };
     });
   },

ui/src/visualizations/file-tree-evolution/styles.scss

@@ -0,0 +1,13 @@
+.mainContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.commitSlider {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}