#233 now using Filepicker instead of legacy FileBrowser, added simula…

…tion to CRM files

binocular-frontend/src/components/BubbleChart/index.tsx

@@ -363,6 +363,12 @@ export default class BubbleChart extends React.Component<Props, State> {
   }
 
   group(svg, groupedData) {
+    const simulation = d3
+      .forceSimulation(groupedData)
+      .force('charge', d3.forceManyBody().strength(0))
+      .force('x', d3.forceX())
+      .force('y', d3.forceY());
+
     const leaf = svg
       .selectAll('g')
       .data(groupedData)
@@ -398,6 +404,10 @@ export default class BubbleChart extends React.Component<Props, State> {
           tooltipVisible: false,
         });
       });
+
+    simulation.on('tick', () => {
+      circle.attr('cx', (d) => d.x).attr('cy', (d) => d.y);
+    });
   }
 
   /**

binocular-frontend/src/visualizations/code-review-metrics/chart/chart.tsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import BubbleChart, { Bubble } from '../../../components/BubbleChart';
 import { Author, Comment, MergeRequest, ReviewThread } from '../../../types/dbTypes';
-import LegendCompact from '../../../components/LegendCompact';
 import _ from 'lodash';
 import styles from '../styles.module.scss';
 import { connect } from 'react-redux';
@@ -140,8 +139,8 @@ class ChartComponent extends React.Component<Props, State> {
         color: 'red',
         size: count,
         data: [
-          { label: 'filename', value: file },
-          { label: 'Reviews inside file', value: count },
+          { label: 'Filename', value: file },
+          { label: 'Reviews', value: count },
         ],
         group: { identifier, foldername },
       };
@@ -198,7 +197,7 @@ class ChartComponent extends React.Component<Props, State> {
   getReviewThreadOwnershipCountByFile(mergeRequests: MergeRequest[], fileMap: Map<string, number>, props) {
     _.each(mergeRequests, (mergeRequest: MergeRequest) => {
       mergeRequest.reviewThreads.forEach((reviewThread: ReviewThread) => {
-        if (props.codeReviewMetricsState.config.path.has(reviewThread.path)) {
+        if (props.codeReviewMetricsState.config.globalActiveFiles.find((file) => file === reviewThread.path)) {
           this.handleMapIncrementation(reviewThread.path, fileMap);
         }
       });

binocular-frontend/src/visualizations/code-review-metrics/config.tsx

@@ -2,22 +2,16 @@
 
 import React from 'react';
 import * as styles from './styles.module.scss';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import TabCombo from '../../components/TabCombo';
-import { File, setCategory, setFile, setGrouping, setPath } from './sagas';
-import FileBrowser from '../legacy/code-hotspots/components/fileBrowser/fileBrowser';
+import { setActiveFiles, setCategory, setGrouping } from './sagas';
+import Filepicker from '../../components/Filepicker';
 
 interface Props {
   codeReviewMetricsState: any;
   setGrouping: (group: any) => void;
   setCategory: (category: any) => void;
-  setPath: (path: string) => void;
-  setFile: (file: string) => void;
-  fileBrowserProps: FileBrowserProps;
-}
-
-interface FileBrowserProps {
-  files: File[];
+  setActiveFiles: (files: any) => void;
 }
 
 class ConfigComponent extends React.Component<Props> {
@@ -29,6 +23,10 @@ class ConfigComponent extends React.Component<Props> {
     this.props.setCategory(category);
   }
 
+  onSetActiveFiles(files) {
+    this.props.setActiveFiles(files);
+  }
+
   render() {
     return (
       <div className={styles.configContainer}>
@@ -60,10 +58,10 @@ class ConfigComponent extends React.Component<Props> {
         )}
         {this.props.codeReviewMetricsState.config.grouping === 'file' && (
           <div className="field">
-            <FileBrowser
-              files={this.props.codeReviewMetricsState.data.data.files}
-              props={this.props}
-              highlights={this.props.codeReviewMetricsState.config.path}
+            <Filepicker
+              fileList={this.props.codeReviewMetricsState.data.data.fileList}
+              globalActiveFiles={this.props.codeReviewMetricsState.config.globalActiveFiles}
+              setActiveFiles={(files) => this.onSetActiveFiles(files)}
             />
           </div>
         )}
@@ -80,8 +78,7 @@ const mapDispatchToProps = (dispatch /*, ownProps*/) => {
   return {
     setGrouping: (group) => dispatch(setGrouping(group)),
     setCategory: (category) => dispatch(setCategory(category)),
-    onSetPath: (path) => dispatch(setPath(path)),
-    onSetFile: (file) => dispatch(setFile(file)),
+    setActiveFiles: (files) => dispatch(setActiveFiles(files)),
   };
 };
 

binocular-frontend/src/visualizations/code-review-metrics/reducers/config.ts

@@ -3,31 +3,12 @@
 import { handleActions } from 'redux-actions';
 import _ from 'lodash';
 
-const highlights = new Set<string>();
-
-const setPath = (state, action) => {
-  const highlight = new Set(state.path);
-  if (highlight.has(action.payload)) {
-    highlight.delete(action.payload);
-  } else {
-    highlight.add(action.payload);
-  }
-  return _.assign({}, state, { path: highlight });
-};
-
-const initHighlights = (state, action) => {
-  const highlight = new Set(action.payload);
-  return _.assign({}, state, { path: highlight });
-};
-
 export default handleActions(
   {
     SET_ACTIVE_VISUALIZATIONS: (state, action) => _.assign({}, state, { visualizations: action.payload }),
     SET_GROUPING: (state, action) => _.assign({}, state, { grouping: action.payload }),
     SET_CATEGORY: (state, action) => _.assign({}, state, { category: action.payload }),
-    SET_PATH: setPath,
-    SET_FILE: (state, action) => _.assign({}, state, { file: action.payload }),
-    INIT_HIGHLIGHTS: initHighlights,
+    CRM_SET_ACTIVE_FILES: (state, action) => _.assign({}, state, { globalActiveFiles: action.payload }),
   },
-  { visualizations: [], grouping: 'user', category: 'comment', path: highlights, file: '' },
+  { visualizations: [], grouping: 'user', category: 'comment', globalActiveFiles: [] },
 );

binocular-frontend/src/visualizations/code-review-metrics/sagas/index.ts

@@ -10,9 +10,7 @@ export const refresh = createAction('REFRESH');
 export const requestCodeReviewMetricsData = createAction('REQUEST_CODE_REVIEW_METRICS_DATA');
 export const setGrouping = createAction('SET_GROUPING');
 export const setCategory = createAction('SET_CATEGORY');
-export const setFile = createAction('SET_FILE');
-export const setPath = createAction('SET_PATH');
-export const initHighlights = createAction('INIT_HIGHLIGHTS');
+export const setActiveFiles = createAction('CRM_SET_ACTIVE_FILES');
 export const receiveCodeReviewMetricsData = timestampedActionFactory('RECEIVE_CODE_REVIEW_METRICS_DATA');
 export const receiveCodeReviewMetricsDataError = createAction('RECEIVE_CODE_REVIEW_METRICS_DATA_ERROR');
 
@@ -53,13 +51,13 @@ export const fetchCodeReviewMetricsData = fetchFactory(
     ]);
 
     const mergeRequests = results[0];
-    const files = results[1];
-
-    yield put(initHighlights(files.map((file) => file.key)));
+    let fileList = results[1];
 
+    fileList = fileList.map((file) => file.key);
+    console.log(fileList);
     return {
       mergeRequests,
-      files,
+      fileList,
     };
   },
   requestCodeReviewMetricsData,

binocular-frontend/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.js

@@ -85,14 +85,9 @@ class FileStruct extends React.PureComponent {
       <div>
         {this.props.data.content.map((data, i) => {
           if (data.type === 'file') {
-            let shouldHighlight = false;
-            if (this.props.highlights) {
-              shouldHighlight = this.props.highlights.has(data.path);
-            }
-            const classes = shouldHighlight ? styles.BCHighlighted : i % 2 === 0 ? styles.BCEven : styles.BCOdd;
             return (
               <div
-                className={styles.button + ' ' + classes}
+                className={styles.button + ' ' + (i % 2 === 0 ? styles.BCEven : styles.BCOdd)}
                 key={data.name}
                 onClick={() => {
                   this.clickFile(data.url, data.path);
@@ -123,7 +118,7 @@ class FileStruct extends React.PureComponent {
                   {data.name}
                 </button>
                 <div id={'' + i + 'panel' + data.name} className={styles.panel} style={{ display: this.props.foldOut ? 'block' : 'none' }}>
-                  <FileStruct data={data} foldOut={this.props.foldOut} props={this.props.props} highlights={this.props.highlights} />
+                  <FileStruct data={data} foldOut={this.props.foldOut} props={this.props.props} />
                 </div>
               </div>
             );

binocular-frontend/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.module.scss

@@ -16,14 +16,6 @@
   border-radius: 4px;
 }
 
-.BCHighlighted {
-  background-color: #aedbfb;
-}
-
-.BCHighlighted:hover {
-  background-color: #f0c6c6;
-}
-
 .ACOdd{
   background-color: #4882e0;
   color: whitesmoke;
@@ -101,8 +93,4 @@
 
 .searchBoxHint:focus-within{
   height: 4rem;
-}
-
-.highlight {
-
 }