#59: Implement check box to only display changes

INSO-TUWien · Jan 15, 2023 · 1da8b80 · 1da8b80
1 parent 7ab396a
commit 1da8b80
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 21 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
@@ -22,6 +22,7 @@ export default class Changes extends React.Component {
         date: '',
       },
       changed: [],
+      displayOnlyChanged: null,
     };
   }
 
@@ -54,12 +55,12 @@ export default class Changes extends React.Component {
         <tbody>
           <td>
             <div className={styles.padding} hidden={this.state.tree1.length === 0}>
-              <Tree files={this.state.tree1} />
+              <Tree files={this.state.tree1} mode={this.state.displayOnlyChanged} />
             </div>
           </td>
           <td>
             <div className={styles.padding} hidden={this.state.tree2.length === 0}>
-              <Tree files={this.state.tree2} />
+              <Tree files={this.state.tree2} mode={this.state.displayOnlyChanged} />
             </div>
           </td>
         </tbody>
@@ -117,7 +118,13 @@ export default class Changes extends React.Component {
   componentWillReceiveProps(nextProps) {
     if (nextProps.commits.length !== 0) {
       const commits = this.buildingSelect(nextProps.commits, null);
-      this.setState({ commits: nextProps.commits, commitsToChoose1: commits, commitsToChoose2: commits, filter: nextProps.filter });
+      this.setState({
+        commits: nextProps.commits,
+        commitsToChoose1: commits,
+        commitsToChoose2: commits,
+        filter: nextProps.filter,
+        displayOnlyChanged: nextProps.displayOnlyChanged,
+      });
       if (this.state.commit1.sha !== undefined && this.state.commit2.sha !== undefined) {
         this.filterTrees(nextProps.filter);
       }

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,7 +2,7 @@
 
 import { connect } from 'react-redux';
 import Chart from './chart.js';
-import { setFilter, setChanged } from '/ui/src/visualizations/legacy/file-tree-comparison/sagas';
+import { setFilter, setChanged, setDisplayOnlyChanged } from '/ui/src/visualizations/legacy/file-tree-comparison/sagas';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   const corState = state.visualizations.fileTreeComparison.state;
@@ -13,12 +13,14 @@ const mapStateToProps = (state /*, ownProps*/) => {
     tree1: corState.config.tree1,
     tree2: corState.config.tree2,
     filter: corState.config.filter,
+    displayOnlyChanged: corState.config.displayOnlyChanged,
   };
 };
 
 const mapDispatchToProps = (dispatch) => ({
   onSetFilter: (f) => dispatch(setFilter(f)),
   onSetChanged: (changes) => dispatch(setChanged(changes)),
+  onSetDisplayOnlyChanged: (f) => dispatch(setDisplayOnlyChanged(f)),
 });
 
 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
@@ -9,7 +9,6 @@
 
 .tree{
   background-color: lightgrey;
-  border: 1px solid black;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   overflow-y: auto;

diff --git a/ui/src/visualizations/legacy/file-tree-comparison/components/tree.js b/ui/src/visualizations/legacy/file-tree-comparison/components/tree.js
@@ -6,20 +6,22 @@ export default class Tree extends React.PureComponent {
     super(props);
     this.state = {
       tree: [],
+      mode: null,
     };
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
     console.log(nextProps);
     this.setState({
       tree: nextProps.files,
+      mode: nextProps.mode,
     });
   }
 
   render() {
     return (
       <ul className={styles.tree}>
-        <TreeNode node={this.state.tree} props={this.props}></TreeNode>
+        <TreeNode node={this.state.tree} mode={this.state.mode} props={this.props}></TreeNode>
       </ul>
     );
   }
@@ -44,7 +46,7 @@ class TreeNode extends React.PureComponent {
                 return <li className={styles.edit} key={x.name.toString()}>{x.name}</li>;
               }
             } else {
-            return <li key={x.name.toString()}>{x.name}</li>;
+            return <li hidden={this.props.mode} key={x.name.toString()}>{x.name}</li>;
           }
 
           } else {
@@ -58,14 +60,14 @@ class TreeNode extends React.PureComponent {
                   }
                   }>{x.name}</button>
                   <ul hidden={false} className={styles.nested}>
-                    <TreeNode node={x.children}/>
+                    <TreeNode node={x.children} mode={this.props.mode} />
                   </ul>
                 </div>
               );
             }
             else {
               return (
-              <div key={x.name.toString()} className={styles.space}>
+              <div hidden={this.props.mode} key={x.name.toString()} className={styles.space}>
                 <button onClick={event => {
                   const target = event.currentTarget;
                   const panel = target.nextSibling;
@@ -77,7 +79,7 @@ class TreeNode extends React.PureComponent {
                 }
                 }>{x.name}</button>
                 <ul hidden={h} className={styles.nested}>
-                  <TreeNode node={x.children}/>
+                  <TreeNode node={x.children} mode={this.props.mode} />
                 </ul>
               </div>
             );

diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.css b/ui/src/visualizations/legacy/file-tree-comparison/config.css
@@ -10,13 +10,20 @@
 .search {
   padding-top: 1em;
 }
+.tab {
+  display: inline-block;
+  margin-left: 20px;
+}
 .files{
   font-size: smaller;
   overflow-y: auto;
   max-height: 30em;
   overflow-x: auto;
   width: 30em;
 }
+.bottomMargin {
+  margin-bottom: 1em;
+}
 .info {
   max-width: 400px;
   height: 40em;

diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.js b/ui/src/visualizations/legacy/file-tree-comparison/config.js
@@ -2,7 +2,7 @@
 
 import { connect } from 'react-redux';
 import style from './config.css';
-import { setFilter } from './sagas';
+import { setFilter, setDisplayOnlyChanged } from './sagas';
 const mapStateToProps = (state /*, ownProps*/) => {
   const fileTreeState = state.visualizations.fileTreeComparison.state;
   return {
@@ -13,6 +13,7 @@ const mapStateToProps = (state /*, ownProps*/) => {
 const mapDispatchToProps = (dispatch, ownProps) => {
   return Object.assign({
       onSetFilter: (c) => dispatch(setFilter(c)),
+      onSetDisplayOnlyChanged: (c) => dispatch(setDisplayOnlyChanged(c)),
     },
     ownProps
   );
@@ -21,9 +22,9 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 const ChangesConfigComponent = (props) => {
   return (
     <div className={style.info}>
-      <div className={style.search}>
+      <div className={style.search} hidden={props.changed.add.length === 0 && props.changed.edit.length === 0 && props.changed.delete.length === 0}>
         <input
-          hidden={props.changed.add.length === 0 && props.changed.edit.length === 0 && props.changed.delete.length === 0}
+          className={style.bottomMargin}
           placeholder="Highlight issue..."
           onChange={(e) => {
             if (e.target.value === null) {
@@ -33,7 +34,17 @@ const ChangesConfigComponent = (props) => {
             }
           }}
         />
+        <p></p>
+        Only show changed files:
+        <span className={style.tab}></span>
+        <input
+          type={'checkbox'}
+          onChange={(e) => {
+            props.onSetDisplayOnlyChanged(e.target.checked);
+          }}
+        />
       </div>
+
       <div className={style.files}>
         <div hidden={props.changed.add.length === 0}>
           <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
@@ -29,6 +29,10 @@ export default handleActions(
       _.assign({}, state, {
         filter: action.payload ? action.payload : null,
       }),
+    DISPLAY_ONLY_CHANGED: (state, action) =>
+      _.assign({}, state, {
+        displayOnlyChanged: action.payload ? action.payload : false,
+      }),
   },
   {
     commit1: [],
@@ -41,5 +45,6 @@ export default handleActions(
       edit: [],
     },
     filter: '',
+    displayOnlyChanged: 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,10 +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 const setFilter = createAction('SET_FILTER', (f) => f);
+export const setDisplayOnlyChanged = createAction('DISPLAY_ONLY_CHANGED', (f) => f);
 
 export default function* () {
   // fetch data once on entry
@@ -37,9 +36,3 @@ export const fetchFileTreeEvolutionData = fetchFactory(
   receiveCommitsAndFileTree,
   receiveCommitsAndFileTreeError
 );
-
-
-
-
-
-