#35 Add new Filter for Branch \n\n Add Filter sort by Branch and show…

… Branch Information in the Box

ui/src/visualizations/File-Evolution/chart/chart.js

@@ -18,7 +18,8 @@ export default class FileEvolution extends React.Component {
     const space = 50;
     const commitBoxes = this.getCommitsDraw(space);
     //const svgHeight = (commitRects.length / 2 + 1) * this.props.commitBoxHeight + (commitRects.length / 2) * space;
-    const svgHeight = this.props.commitBoxHeight + space;
+    // const svgHeight = this.props.commitBoxHeight + space;
+    const svgHeight = (this.props.commitBoxHeight + space) * 25; //TODO anzahl branch
     const svgWidth = (commitBoxes.length / 2 + 1) * this.props.commitBoxHeight + commitBoxes.length / 2 * space;
     return (
       <div className={styles.chartContainer}>
@@ -64,51 +65,75 @@ export default class FileEvolution extends React.Component {
 
       commitInfo.push(
         <h1>
+          <b>Commit</b>
+          <br />
           {commit.messageHeader}
         </h1>
       );
       commitInfo.push(<hr />);
       if (props.showCommitMessage) {
         commitInfo.push(
           <text fontSize="smaller">
-            Message: {commit.message}
+            <b>Message:</b> {commit.message}
           </text>
         );
+        commitInfo.push(<br />);
       }
       if (props.showCommitSha === 'short') {
         commitInfo.push(
           <text fontSize="smaller">
-            Short SHA: {commit.shortSha}
+            <b>Short SHA:</b> {commit.shortSha}
           </text>
         );
+        commitInfo.push(<br />);
       } else if (props.showCommitSha === 'all') {
-        commitInfo.push(<text fontSize="smaller">SHA: {commit.sha}</text>);
+        commitInfo.push(
+          <text fontSize="smaller">
+            <b>SHA:</b> {commit.sha}
+          </text>
+        );
+        commitInfo.push(<br />);
       }
       if (props.showCommitDate) {
         commitInfo.push(
           <text fontSize="smaller">
-            Date: {commit.date}
+            <b>Date:</b> {commit.date}
           </text>
         );
+        commitInfo.push(<br />);
       }
       if (props.showCommitAuthor) {
         commitInfo.push(
           <text fontSize="smaller">
-            Author: {commit.signature}
+            <b>Author:</b> {commit.signature}
           </text>
         );
+        commitInfo.push(<br />);
+      }
+      if (props.showCommitBranch) {
+        commitInfo.push(
+          <text fontSize="smaller">
+            <b>Branch:</b> {getBranch(props, commit)}
+          </text>
+        );
+        commitInfo.push(<br />);
       }
       if (props.showCommitWeblink) {
         commitInfo.push(
           <a href={commit.webUrl}>
             <text fontSize="smaller">
-              URL: {commit.webUrl}
+              <b>URL:</b> {commit.webUrl}
             </text>
           </a>
         );
+        commitInfo.push(<br />);
       }
       if (props.showCommitFiles) {
-        commitInfo.push(<text fontSize="smaller">Files:</text>);
+        commitInfo.push(
+          <text fontSize="smaller">
+            <b>Files:</b>
+          </text>
+        );
         commitInfo.push(<br />);
         const files = props.commitFiles[commit.sha];
         for (const f in files) {
@@ -156,37 +181,85 @@ export default class FileEvolution extends React.Component {
       arrow.push(<polyline points={pointsForArrowHead} fill="none" stroke="black" />);
       return arrow;
     }
+    function getBranchCommitPosition(props, space, y, x, height) {
+      let newY = y;
+      const pos = {};
+      for (const b in props.branches) {
+        const branchName = props.branches[b].branch;
+        // console.log(this.props.selectedBranches.indexOf(branchName));
+        // if (this.props.selectedBranches.indexOf(branchName) > -1) {
+        const xy = {};
+        xy['x'] = x;
+        xy['y'] = newY;
+        pos[branchName] = xy;
+        newY = newY + space + height;
+        //}
+      }
+      console.log(pos);
+      return pos;
+    }
 
     const commitData = this.props.commits;
     const width = this.props.commitBoxWidth;
     const height = this.props.commitBoxHeight;
     const commitRects = [];
     let x = 20;
-    const y = 20;
+    let y = space;
+    const commitBoxPosition = getBranchCommitPosition(this.props, space, y, x, height);
+    console.log(commitBoxPosition);
     for (const i in commitData) {
       const commit = commitData[i];
+
       if (this.props.selectedAuthors.indexOf(commit.signature) > -1) {
         if (this.props.selectedBranches.indexOf(getBranch(this.props, commit)) > -1) {
-          const color = getBoxColor(this.props, commit);
-          commitRects.push(
-            <g width={width} height={height}>
-              <rect x={x} y={y} width={width} height={height} fill={color} />
-              <foreignObject x={x} y={y} width={width} height={height}>
-                {getCommitInfo(this.props, commit)}
-              </foreignObject>
-            </g>
-          );
+          if (this.props.commitBoxSort === 'date') {
+            const color = getBoxColor(this.props, commit);
+            commitRects.push(
+              <g width={width} height={height}>
+                <rect x={x} y={y} width={width} height={height} fill={color} />
+                <foreignObject x={x} y={y} width={width} height={height}>
+                  {getCommitInfo(this.props, commit)}
+                </foreignObject>
+              </g>
+            );
 
-          commitRects.push(
-            <g width={width} height={height}>
-              {getArrow(x, y, height, width)}
-            </g>
-          );
+            commitRects.push(
+              <g width={width} height={height}>
+                {getArrow(x, y, height, width)}
+              </g>
+            );
 
-          x = x + width + space;
-          //y = y + height + space; //TODO auskommentieren
-        }
-      }
+            x = x + width + space;
+            //y = y + height + space; //TODO auskommentieren
+          } else if (this.props.commitBoxSort === 'branch') {
+            if (commitBoxPosition[getBranch(this.props, commit)] !== undefined) {
+              console.log(getBranch(this.props, commit));
+              console.log(commitBoxPosition[getBranch(this.props, commit)]['x']);
+              console.log(commitBoxPosition[getBranch(this.props, commit)]['y']);
+              x = commitBoxPosition[getBranch(this.props, commit)]['x'];
+              y = commitBoxPosition[getBranch(this.props, commit)]['y'];
+
+              commitRects.push(
+                <g width={width} height={height}>
+                  <rect x={x} y={y} width={width} height={height} fill={getBoxColor(this.props, commit)} />
+                  <foreignObject x={x} y={y} width={width} height={height}>
+                    {getCommitInfo(this.props, commit)}
+                  </foreignObject>
+                </g>
+              );
+
+              commitRects.push(
+                <g width={width} height={height}>
+                  {getArrow(x, y, height, width)}
+                </g>
+              );
+
+              commitBoxPosition[getBranch(this.props, commit)]['x'] = x + width + space;
+              //y = y + height + space; //TODO auskommentieren
+            }
+          } //sortbranch
+        } //selected Branches
+      } //selected Authors
     }
     commitRects.pop(); //remove last arrow
     return commitRects;

ui/src/visualizations/File-Evolution/chart/index.js

@@ -20,12 +20,14 @@ const mapStateToProps = (state /*, ownProps*/) => {
     commitBoxHeight: FileEvolutionState.config.commitBoxHeight,
     commitBoxWidth: FileEvolutionState.config.commitBoxWidth,
     commitBoxColor: FileEvolutionState.config.commitBoxColor,
+    commitBoxSort: FileEvolutionState.config.commitBoxSort,
     showCommitDate: FileEvolutionState.config.showCommitDate,
     showCommitAuthor: FileEvolutionState.config.showCommitAuthor,
     showCommitMessage: FileEvolutionState.config.showCommitMessage,
     showCommitWeblink: FileEvolutionState.config.showCommitWeblink,
     showCommitSha: FileEvolutionState.config.showCommitSha,
-    showCommitFiles: FileEvolutionState.config.showCommitFiles
+    showCommitFiles: FileEvolutionState.config.showCommitFiles,
+    showCommitBranch: FileEvolutionState.config.showCommitBranch
   };
 };
 

ui/src/visualizations/File-Evolution/config.js

@@ -13,17 +13,18 @@ import {
   setShowCommitMessage,
   setShowCommitAuthor,
   setShowCommitFiles,
-  setShowCommitSha, setShowCommitWeblink
+  setShowCommitSha,
+  setShowCommitWeblink,
+  setCommitBoxSort,
+  setShowCommitBranch
 } from './sagas';
 
 import React from 'react';
 import CheckboxLegend from '../../components/CheckboxLegend';
 import TabCombo from '../../components/TabCombo';
 
 const mapStateToProps = (state /*, ownProps*/) => {
-  //console.log(state);
   const FileEvolutionState = state.visualizations.fileEvolution.state;
-  console.log(FileEvolutionState);
   return {
     branches: FileEvolutionState.data.data.branches,
     committers: FileEvolutionState.data.data.committers,
@@ -39,7 +40,8 @@ const mapStateToProps = (state /*, ownProps*/) => {
     showCommitAuthor: FileEvolutionState.config.showCommitAuthor,
     showCommitMessage: FileEvolutionState.config.showCommitMessage,
     showCommitSha: FileEvolutionState.config.showCommitSha,
-    showCommitFiles: FileEvolutionState.config.showCommitFiles
+    showCommitFiles: FileEvolutionState.config.showCommitFiles,
+    showCommitBranch: FileEvolutionState.config.showCommitBranch
   };
 };
 
@@ -54,8 +56,10 @@ const mapDispatchToProps = (dispatch /*, ownProps*/) => {
     onClickShowCommitBoxFiles: showCommitFiles => dispatch(setShowCommitFiles(showCommitFiles)),
     onClickShowCommitBoxMessage: showCommitMessage => dispatch(setShowCommitMessage(showCommitMessage)),
     onClickShowCommitBoxWeblink: showCommitWeblink => dispatch(setShowCommitWeblink(showCommitWeblink)),
+    onClickShowCommitBoxBranch: showCommitBranch => dispatch(setShowCommitBranch(showCommitBranch)),
     onSetShowCommitSha: showCommitSha => dispatch(setShowCommitSha(showCommitSha)),
-    onClickCommitBoxColor: commitBoxColor => dispatch(setCommitBoxColor(commitBoxColor))
+    onClickCommitBoxColor: commitBoxColor => dispatch(setCommitBoxColor(commitBoxColor)),
+    onClickCommitBoxSortBy: commitBoxSort => dispatch(setCommitBoxSort(commitBoxSort))
   };
 };
 
@@ -96,7 +100,6 @@ const FileEvolutionConfigComponent = props => {
               />
             </div>
             <label className={styles.label}>Box Color</label>
-
             <TabCombo
               value={props.commitBoxColor}
               options={[
@@ -105,6 +108,12 @@ const FileEvolutionConfigComponent = props => {
               ]}
               onChange={value => props.onClickCommitBoxColor(value)}
             />
+            <label className={styles.label}>Sort by</label>
+            <TabCombo
+              value={props.commitBoxSort}
+              options={[{ label: 'Date', icon: 'file-alt', value: 'date' }, { label: 'Branch', icon: 'cloud-upload-alt', value: 'branch' }]}
+              onChange={value => props.onClickCommitBoxSortBy(value)}
+            />
           </div>
           <div className="control">
             <label className="label">Show Commit Infos</label>
@@ -117,7 +126,7 @@ const FileEvolutionConfigComponent = props => {
               />{' '}
               Show Author{' '}
             </label>
-            <br/>
+            <br />
             <label className={styles.checkboxLabel}>
               <input
                 name="showDate"
@@ -127,7 +136,17 @@ const FileEvolutionConfigComponent = props => {
               />{' '}
               Show Date{' '}
             </label>
-            <br/>
+            <br />
+            <label className={styles.checkboxLabel}>
+              <input
+                name="showBranch"
+                type="checkbox"
+                onChange={() => props.onClickShowCommitBoxBranch(!props.showCommitBranch)}
+                checked={props.showCommitBranch}
+              />{' '}
+              Show Branch{' '}
+            </label>
+            <br />
             <label className={styles.checkboxLabel}>
               <input
                 name="showFiles"
@@ -137,7 +156,7 @@ const FileEvolutionConfigComponent = props => {
               />{' '}
               Show Files{' '}
             </label>
-            <br/>
+            <br />
             <label className={styles.checkboxLabel}>
               <input
                 name="showMessage"
@@ -147,7 +166,7 @@ const FileEvolutionConfigComponent = props => {
               />{' '}
               Show Message{' '}
             </label>
-            <br/>
+            <br />
             <label className={styles.checkboxLabel}>
               <input
                 name="showWeblink"

ui/src/visualizations/File-Evolution/reducers/config.js

@@ -8,26 +8,30 @@ export default handleActions(
     SET_COMMIT_BOX_WIDTH: (state, action) => _.assign({}, state, { commitBoxWidth: action.payload }),
     SET_COMMIT_BOX_HEIGHT: (state, action) => _.assign({}, state, { commitBoxHeight: action.payload }),
     SET_COMMIT_BOX_COLOR: (state, action) => _.assign({}, state, { commitBoxColor: action.payload }),
+    SET_COMMIT_BOX_SORT: (state, action) => _.assign({}, state, { commitBoxSort: action.payload }),
     SET_SELECTED_AUTHORS: (state, action) => _.assign({}, state, { selectedAuthors: [...action.payload] }),
     SET_SELECTED_BRANCHES: (state, action) => _.assign({}, state, { selectedBranches: [...action.payload] }),
     SET_SHOW_COMMIT_DATE: (state, action) => _.assign({}, state, { showCommitDate: action.payload }),
     SET_SHOW_COMMIT_SHA: (state, action) => _.assign({}, state, { showCommitSha: action.payload }),
     SET_SHOW_COMMIT_AUTHOR: (state, action) => _.assign({}, state, { showCommitAuthor: action.payload }),
     SET_SHOW_COMMIT_FILES: (state, action) => _.assign({}, state, { showCommitFiles: action.payload }),
     SET_SHOW_COMMIT_WEBLINK: (state, action) => _.assign({}, state, { showCommitWeblink: action.payload }),
-    SET_SHOW_COMMIT_MESSAGE: (state, action) => _.assign({}, state, { showCommitMessage: action.payload })
+    SET_SHOW_COMMIT_MESSAGE: (state, action) => _.assign({}, state, { showCommitMessage: action.payload }),
+    SET_SHOW_COMMIT_BRANCH: (state, action) => _.assign({}, state, { showCommitBranch: action.payload })
   },
   {
     commitBoxWidth: 200,
     commitBoxHeight: 200,
     commitBoxColor: 'author',
+    commitBoxSort: 'date',
     selectedAuthors: [],
     selectedBranches: [],
     showCommitDate: true,
     showCommitSha: 'short',
-    showCommitAuthor: false,
-    showCommitFiles: true,
-    showCommitMessage: true,
+    showCommitAuthor: true,
+    showCommitFiles: false,
+    showCommitMessage: false,
+    showCommitBranch: false,
     showCommitWeblink: false
   }
 );

ui/src/visualizations/File-Evolution/sagas/index.js

@@ -13,6 +13,7 @@ import getFiles from './getFiles.js';
 export const setCommitBoxHeight = createAction('SET_COMMIT_BOX_HEIGHT');
 export const setCommitBoxWidth = createAction('SET_COMMIT_BOX_WIDTH');
 export const setCommitBoxColor = createAction('SET_COMMIT_BOX_COLOR');
+export const setCommitBoxSort = createAction('SET_COMMIT_BOX_SORT');
 
 export const setSelectedAuthors = createAction('SET_SELECTED_AUTHORS');
 export const setSelectedBranches = createAction('SET_SELECTED_BRANCHES');
@@ -23,6 +24,7 @@ export const setShowCommitMessage = createAction('SET_SHOW_COMMIT_MESSAGE');
 export const setShowCommitWeblink = createAction('SET_SHOW_COMMIT_WEBLINK');
 export const setShowCommitAuthor = createAction('SET_SHOW_COMMIT_AUTHOR');
 export const setShowCommitFiles = createAction('SET_SHOW_COMMIT_FILES');
+export const setShowCommitBranch = createAction('SET_SHOW_COMMIT_BRANCH');
 
 export const requestFileEvolutionData = createAction('REQUEST_FILE_EVOLUTION_DATA');
 export const receiveFileEvolutionData = timestampedActionFactory('RECEIVE_FILE_EVOLUTION_DATA');

ui/src/visualizations/File-Evolution/styles.scss

@@ -35,9 +35,11 @@
 
 
 .chartContainer{
+  height: 100%;
+  width: auto;
 .chartDiv {
-  width: 500px;
   height: 100vh;
+  width: 100vw;
   overflow-x: scroll;
   overflow-y: scroll;
 }