From 477a5cd11c77580c7c099259e2a3955a02a24325 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20Gr=C3=B6chenig?=
 <christian.groechenig@gmail.com>
Date: Fri, 8 Apr 2022 15:34:49 +0200
Subject: [PATCH] #45 add basic commit slider to file-tree-evolution

---
 .../file-tree-evolution/chart/CommitSlider.js | 28 +++++++++++++++++++
 .../file-tree-evolution/chart/Sunburst.js     | 13 ++-------
 .../file-tree-evolution/chart/chart.js        | 23 +++++++++++++--
 .../file-tree-evolution/chart/index.js        |  3 +-
 .../file-tree-evolution/sagas/index.js        |  2 +-
 .../file-tree-evolution/styles.scss           | 13 +++++++++
 6 files changed, 66 insertions(+), 16 deletions(-)
 create mode 100644 ui/src/visualizations/file-tree-evolution/chart/CommitSlider.js

diff --git a/ui/src/visualizations/file-tree-evolution/chart/CommitSlider.js b/ui/src/visualizations/file-tree-evolution/chart/CommitSlider.js
new file mode 100644
index 00000000..6a9ce36c
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/ui/src/visualizations/file-tree-evolution/chart/Sunburst.js b/ui/src/visualizations/file-tree-evolution/chart/Sunburst.js
index 290962b7..1fe5b43a 100644
--- a/ui/src/visualizations/file-tree-evolution/chart/Sunburst.js
+++ b/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() {
diff --git a/ui/src/visualizations/file-tree-evolution/chart/chart.js b/ui/src/visualizations/file-tree-evolution/chart/chart.js
index f9082ec1..e09e4067 100644
--- a/ui/src/visualizations/file-tree-evolution/chart/chart.js
+++ b/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>
     );
   }
 }
diff --git a/ui/src/visualizations/file-tree-evolution/chart/index.js b/ui/src/visualizations/file-tree-evolution/chart/index.js
index cca033bc..e6d85b07 100644
--- a/ui/src/visualizations/file-tree-evolution/chart/index.js
+++ b/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
   };
 };
 
diff --git a/ui/src/visualizations/file-tree-evolution/sagas/index.js b/ui/src/visualizations/file-tree-evolution/sagas/index.js
index 67a22837..413d6c6b 100644
--- a/ui/src/visualizations/file-tree-evolution/sagas/index.js
+++ b/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
       };
     });
   },
diff --git a/ui/src/visualizations/file-tree-evolution/styles.scss b/ui/src/visualizations/file-tree-evolution/styles.scss
index e69de29b..86a91422 100644
--- a/ui/src/visualizations/file-tree-evolution/styles.scss
+++ b/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%;
+}
\ No newline at end of file