#34 general improvements

- changing tooltips to be faster and more reliable
- adding line filtering to changes/developer and changes/issue mode
- adding help for newly introduced features

ui/src/visualizations/code-hotspots/chart/chart.js

@@ -122,16 +122,19 @@ export default class CodeHotspots extends React.PureComponent {
               />
             </span>
             <span className={styles.verticalSeparator} />
-            <span className={styles.mg1} style={{ width: '20rem', float: 'left' }}>
+            <span id={'mainSearch'} className={styles.mg1} style={{ width: '20rem', float: 'left' }}>
               <SearchBar
                 searchType={this.state.mode === 1 ? 'developerSearch' : this.state.mode === 2 ? 'issueSearch' : 'commitSearch'}
                 data={this.state.data}
                 placeholder={'Search for ' + (this.state.mode === 1 ? 'Developer' : this.state.mode === 2 ? 'Issues' : 'Commits') + '!'}
                 hint={
                   this.state.mode === 1
-                    ? '-n [term] search developer name; ' + '-e [term] search developer email'
+                    ? '-n [term] search developer name; ' + '-e [term] search developer email' + '-l [term] search line or multible lines'
                     : this.state.mode === 2
-                      ? '-t [term] search title; ' + '-d [term] search description; ' + '-i [term] search iid'
+                      ? '-t [term] search title; ' +
+                        '-d [term] search description; ' +
+                        '-i [term] search iid' +
+                        '-l [term] search line or multible lines'
                       : '-m [term] search commit message; ' +
                         '-s [term] search commit sha; ' +
                         '-d [term] search developer; ' +

ui/src/visualizations/code-hotspots/chart/charts/subCharts/rowChartGeneration.js

@@ -103,7 +103,7 @@ export default class rowChartGeneration {
       .attr('class', 'tooltipRow')
       .attr('id', 'tooltipRow')
       .style('position', 'absolute')
-      .style('opacity', 0)
+      .style('display', 'none')
       .style('background-color', '#FFFFFFDD')
       .style('box-shadow', '0px 0px 10px #555555')
       .style('width', '40rem')
@@ -170,7 +170,7 @@ export default class rowChartGeneration {
           .attr('height', barHeight)
           .attr('z-index', '10')
           .on('mouseover', function(event, d) {
-            tooltipp.transition().duration(200).style('opacity', 1);
+            tooltipp.transition().duration(200).style('display', 'block');
             tooltipp
               .html(
                 "<div style='font-weight: bold'>Row: " +
@@ -186,7 +186,7 @@ export default class rowChartGeneration {
               .style('top', (d.row - firstLineNumber + 1) * barHeight + 'px');
           })
           .on('mouseout', function() {
-            tooltipp.transition().duration(500).style('opacity', 0);
+            tooltipp.transition().duration(500).style('display', 'none');
           });
 
         break;
@@ -203,7 +203,7 @@ export default class rowChartGeneration {
           .attr('height', barHeight)
           .attr('z-index', '10')
           .on('mouseover', function(event, d) {
-            tooltipp.transition().duration(200).style('opacity', 1);
+            tooltipp.transition().duration(200).style('display', 'block');
             tooltipp
               .html(
                 "<div style='font-weight: bold'>Row: " +
@@ -218,7 +218,7 @@ export default class rowChartGeneration {
               .style('top', (d.row - firstLineNumber + 1) * barHeight + 'px');
           })
           .on('mouseout', function() {
-            tooltipp.transition().duration(500).style('opacity', 0);
+            tooltipp.transition().duration(500).style('display', 'none');
           });
 
         break;
@@ -235,14 +235,14 @@ export default class rowChartGeneration {
           .attr('height', barHeight)
           .attr('z-index', '10')
           .on('mouseover', function(event, d) {
-            tooltipp.transition().duration(200).style('opacity', 1);
+            tooltipp.transition().duration(200).style('display', 'block');
             tooltipp
               .html("<div style='font-weight: bold'>Row: " + (parseInt(d.row) + 1) + '</div>' + '<div>Changes: ' + d.value + '</div>')
               .style('right', 30 + 'px')
               .style('top', (d.row - firstLineNumber + 1) * barHeight + 'px');
           })
           .on('mouseout', function() {
-            tooltipp.transition().duration(500).style('opacity', 0);
+            tooltipp.transition().duration(500).style('display', 'none');
           });
 
         break;

ui/src/visualizations/code-hotspots/components/fileBrowser/fileBrowser.js

@@ -52,7 +52,7 @@ export default class FileBrowser extends React.PureComponent {
     return (
       <div>
         <div className={'label'}>Files:</div>
-        <div style={{ margin: '1rem 0', height: '3rem' }}>
+        <div id={'fileSearch'} style={{ margin: '1rem 0', height: '3rem' }}>
           <SearchBar
             searchType={'fileSearch'}
             data={this.props.files}
@@ -85,8 +85,7 @@ class FileStruct extends React.PureComponent {
                 className={styles.button + ' ' + (i % 2 === 0 ? styles.BCEven : styles.BCOdd)}
                 key={data.name}
                 onClick={() => {
-                  this.props.props.onSetFile(data.url);
-                  this.props.props.onSetPath(data.path);
+                  this.clickFile(data.url, data.path);
                 }}>
                 {data.name}
               </div>
@@ -125,7 +124,7 @@ class FileStruct extends React.PureComponent {
   }
 
   clickFile(Url, Path) {
-    console.log(Url);
-    console.log(Path);
+    this.props.props.onSetFile(Url);
+    this.props.props.onSetPath(Path);
   }
 }

ui/src/visualizations/code-hotspots/components/fileBrowser/fileBrowser.scss

@@ -1,5 +1,5 @@
 .fileBrowser{
-  height: 70vh;
+  height: 65vh;
   overflow-y: scroll;
 }
 

ui/src/visualizations/code-hotspots/components/searchBar/searchAlgorithm.js

@@ -138,8 +138,8 @@ export default class SearchAlgorithm {
 
   static performDeveloperSearch(dataSet, searchTerm) {
     let filteredDataSet = dataSet.data;
-    const firstLineNumber = 1;
-    const code = dataSet.code;
+    let firstLineNumber = 1;
+    let code = dataSet.code;
     const searchTermChunks = searchTerm.toLowerCase().split(' ');
     for (let i = 0; i < searchTermChunks.length; i++) {
       switch (searchTermChunks[i]) {
@@ -159,6 +159,47 @@ export default class SearchAlgorithm {
           break;
         default:
           filteredDataSet = filteredDataSet.filter(d => d.dev.toLowerCase().includes(searchTermChunks[i]));
+          break;
+        case '-l':
+        case '-line':
+        case '-lines':
+          if (i < searchTermChunks.length - 1) {
+            i++;
+            const searchTermChunk = searchTermChunks[i];
+            if (searchTermChunk.includes('-')) {
+              if (searchTermChunk.startsWith('-')) {
+                const endNr = parseInt(searchTermChunk.substring(1));
+                if (!isNaN(endNr)) {
+                  code = code.split(/\r\n|\r|\n/).filter((e, i) => i < endNr).join('\n');
+                  filteredDataSet = filteredDataSet.filter(d => d.row < endNr);
+                }
+              } else if (searchTermChunk.endsWith('-')) {
+                const startNr = parseInt(searchTermChunk.substring(0, searchTermChunk.length - 1));
+                if (!isNaN(startNr)) {
+                  firstLineNumber = startNr;
+                  code = code.split(/\r\n|\r|\n/).filter((e, i) => i >= startNr - 1).join('\n');
+                  filteredDataSet = filteredDataSet.filter(d => d.row >= startNr - 1);
+                }
+              } else {
+                const rowSearchTermChunks = searchTermChunk.split('-');
+                const startNr = parseInt(rowSearchTermChunks[0]);
+                const endNr = parseInt(rowSearchTermChunks[1]);
+                if (!isNaN(startNr) && !isNaN(endNr)) {
+                  firstLineNumber = startNr;
+                  code = code.split(/\r\n|\r|\n/).filter((e, i) => i >= startNr - 1 && i < endNr).join('\n');
+                  filteredDataSet = filteredDataSet.filter(d => d.row >= startNr - 1 && d.row < endNr);
+                }
+              }
+            } else {
+              const lineNr = parseInt(searchTermChunk);
+              if (!isNaN(lineNr)) {
+                firstLineNumber = lineNr;
+                code = code.split(/\r\n|\r|\n/).find((e, i) => i === lineNr - 1);
+                filteredDataSet = filteredDataSet.filter(d => d.row === lineNr - 1);
+              }
+            }
+          }
+
           break;
       }
     }
@@ -178,8 +219,8 @@ export default class SearchAlgorithm {
 
   static performIssueSearch(dataSet, searchTerm) {
     let filteredDataSet = dataSet.data;
-    const firstLineNumber = 1;
-    const code = dataSet.code;
+    let firstLineNumber = 1;
+    let code = dataSet.code;
     const searchTermChunks = searchTerm.toLowerCase().split(' ');
     for (let i = 0; i < searchTermChunks.length; i++) {
       switch (searchTermChunks[i]) {
@@ -211,6 +252,47 @@ export default class SearchAlgorithm {
               ('' + d.description).toLowerCase().includes(searchTermChunks[i]) ||
               d.iid.toLowerCase().includes(searchTermChunks[i])
           );
+          break;
+        case '-l':
+        case '-line':
+        case '-lines':
+          if (i < searchTermChunks.length - 1) {
+            i++;
+            const searchTermChunk = searchTermChunks[i];
+            if (searchTermChunk.includes('-')) {
+              if (searchTermChunk.startsWith('-')) {
+                const endNr = parseInt(searchTermChunk.substring(1));
+                if (!isNaN(endNr)) {
+                  code = code.split(/\r\n|\r|\n/).filter((e, i) => i < endNr).join('\n');
+                  filteredDataSet = filteredDataSet.filter(d => d.row < endNr);
+                }
+              } else if (searchTermChunk.endsWith('-')) {
+                const startNr = parseInt(searchTermChunk.substring(0, searchTermChunk.length - 1));
+                if (!isNaN(startNr)) {
+                  firstLineNumber = startNr;
+                  code = code.split(/\r\n|\r|\n/).filter((e, i) => i >= startNr - 1).join('\n');
+                  filteredDataSet = filteredDataSet.filter(d => d.row >= startNr - 1);
+                }
+              } else {
+                const rowSearchTermChunks = searchTermChunk.split('-');
+                const startNr = parseInt(rowSearchTermChunks[0]);
+                const endNr = parseInt(rowSearchTermChunks[1]);
+                if (!isNaN(startNr) && !isNaN(endNr)) {
+                  firstLineNumber = startNr;
+                  code = code.split(/\r\n|\r|\n/).filter((e, i) => i >= startNr - 1 && i < endNr).join('\n');
+                  filteredDataSet = filteredDataSet.filter(d => d.row >= startNr - 1 && d.row < endNr);
+                }
+              }
+            } else {
+              const lineNr = parseInt(searchTermChunk);
+              if (!isNaN(lineNr)) {
+                firstLineNumber = lineNr;
+                code = code.split(/\r\n|\r|\n/).find((e, i) => i === lineNr - 1);
+                filteredDataSet = filteredDataSet.filter(d => d.row === lineNr - 1);
+              }
+            }
+          }
+
           break;
       }
     }

ui/src/visualizations/code-hotspots/components/searchBar/searchTextHighlighting.js

@@ -109,6 +109,21 @@ export default class SearchTextHighlighting {
         modifier: '-email',
         color: '#ffcc00',
         secondary_color: '#fff7d8'
+      },
+      {
+        modifier: '-l',
+        color: '#007aff',
+        secondary_color: '#ebf5ff'
+      },
+      {
+        modifier: '-line',
+        color: '#007aff',
+        secondary_color: '#ebf5ff'
+      },
+      {
+        modifier: '-lines',
+        color: '#007aff',
+        secondary_color: '#ebf5ff'
       }
     ];
     return this.performTextHighlighting(searchTerm, highlightSet);
@@ -145,6 +160,21 @@ export default class SearchTextHighlighting {
         modifier: '-iid',
         color: '#ff9500',
         secondary_color: '#fff7eb'
+      },
+      {
+        modifier: '-l',
+        color: '#007aff',
+        secondary_color: '#ebf5ff'
+      },
+      {
+        modifier: '-line',
+        color: '#007aff',
+        secondary_color: '#ebf5ff'
+      },
+      {
+        modifier: '-lines',
+        color: '#007aff',
+        secondary_color: '#ebf5ff'
       }
     ];
     return this.performTextHighlighting(searchTerm, highlightSet);

ui/src/visualizations/code-hotspots/components/settings/settings.js

@@ -153,30 +153,30 @@ export default class Settings extends React.PureComponent {
                     Classic
                   </button>
                   <button
-                    id={'heatmapStyleCompact'}
+                    id={'heatmapStyleModerate'}
                     className={'button'}
                     onClick={() => {
                       document.getElementById('heatmapStyleClassic').classList.remove(settingsStyles.buttonRowSelected);
-                      document.getElementById('heatmapStyleCompact').classList.add(settingsStyles.buttonRowSelected);
-                      document.getElementById('heatmapStyleModerate').classList.remove(settingsStyles.buttonRowSelected);
+                      document.getElementById('heatmapStyleCompact').classList.remove(settingsStyles.buttonRowSelected);
+                      document.getElementById('heatmapStyleModerate').classList.add(settingsStyles.buttonRowSelected);
                       const currDisplayProps = this.state.displayProps;
-                      currDisplayProps.heatMapStyle = 1;
+                      currDisplayProps.heatMapStyle = 2;
                       this.setState({ displayProps: currDisplayProps });
                     }}>
-                    Compact
+                    Moderate
                   </button>
                   <button
-                    id={'heatmapStyleModerate'}
+                    id={'heatmapStyleCompact'}
                     className={'button'}
                     onClick={() => {
                       document.getElementById('heatmapStyleClassic').classList.remove(settingsStyles.buttonRowSelected);
-                      document.getElementById('heatmapStyleCompact').classList.remove(settingsStyles.buttonRowSelected);
-                      document.getElementById('heatmapStyleModerate').classList.add(settingsStyles.buttonRowSelected);
+                      document.getElementById('heatmapStyleCompact').classList.add(settingsStyles.buttonRowSelected);
+                      document.getElementById('heatmapStyleModerate').classList.remove(settingsStyles.buttonRowSelected);
                       const currDisplayProps = this.state.displayProps;
-                      currDisplayProps.heatMapStyle = 2;
+                      currDisplayProps.heatMapStyle = 1;
                       this.setState({ displayProps: currDisplayProps });
                     }}>
-                    Moderate
+                    Compact
                   </button>
                 </div>
                 <hr />

ui/src/visualizations/code-hotspots/config/config.js

@@ -48,6 +48,7 @@ const CodeHotspotsConfigComponent = props => {
           {options}
         </select>
       </div>
+      <hr />
       <div id={'fileSelector'}>
         <FileBrowser files={props.files} props={props} />
       </div>