[#170] CodeView: add selection to filter files by format (#448)

When viewing the files changed by an author, all the files will be listed. There is no way to filter out irrelevant files. Users may want to view files of certain file extensions. Let's * add checkboxes for users to select/unselect their file extensions and view files of the checked extensions * select-all checkbox if users want to check all of the file extensions * LOC count is also shifted beside the checkboxes Future improvement: There is some lagging as the number of file extensions selected is increased, mostly due to DOM update time.
reposense · Jan 12, 2019 · c153f4c · c153f4c
1 parent 0cc3f4d
commit c153f4c
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 10 deletions.
diff --git a/docs/UserGuide.md b/docs/UserGuide.md
@@ -80,6 +80,7 @@ The `Chart Panel` (an example is shown above) contains _Ramp Charts_ and _Contri
 
 The `Code Panel` allows users to see the code attributed to a specific author. Click on the name of the author in the `Chart Panel` to display the `Code Panel` on the right.
 * The Code Panel shows the files that contain author's contributions, sorted by the number of lines written.
+* Select the checkboxes to include files of preferred file extensions.
 * Clicking the file title toggles the file content.
 * Code attributed to the author is highlighted in green.
 * Non-trivial code segments that are not written by the selected author are hidden by default, but you can toggle them by clicking on the `...` icon.

diff --git a/docs/images/report.png b/docs/images/report.png
diff --git a/frontend/src/index.jade b/frontend/src/index.jade
@@ -133,18 +133,21 @@ html
           ) {{ info.repo }}
           .author {{ info.name }} ({{ info.author }}) contribution from {{ info.minDate }} to {{ info.maxDate }}
           .contribution(v-if="isLoaded")
-            span(v-bind:title="getTotalFileBlankLineInfo()") Total LoC contributed:&nbsp;
-            span.loc(v-bind:title="getTotalFileBlankLineInfo()") {{ totalLineCount }}&nbsp;
-            span.bloc(v-bind:title="getTotalFileBlankLineInfo()") ({{ totalBlankLineCount }})
-            br
-            span.fileType(v-if="totalLineCount > 0") &rarr; &nbsp;
-                template(v-for="type in Object.keys(filesLinesObj)")
-                    span(v-bind:title="getFileBlankLineInfo(type)") {{ type }}: {{ filesLinesObj[type] }}&nbsp;
-                    span.bloc(v-bind:title="getFileBlankLineInfo(type)") ({{ filesBlankLinesObj[type] }})
+            div.checkboxes.mui-form--inline(v-if="files.length > 0")
+              label
+                input(type="checkbox" v-on:click="selectAll" v-model="isSelectAllChecked").mui-checkbox
+                span.select(v-bind:title="getTotalFileBlankLineInfo()") All:&nbsp;
+                span.loc(v-bind:title="getTotalFileBlankLineInfo()") {{ totalLineCount }}&nbsp;
+                span.bloc(v-bind:title="getTotalFileBlankLineInfo()") ({{ totalBlankLineCount }})
+              template(v-for="type in Object.keys(filesLinesObj)")
+                label
+                  input(type="checkbox" :value="type" v-model="selectedFileTypes" v-on:change="selectFile").mui-checkbox
+                  span(v-bind:title="getFileBlankLineInfo(type)") {{ type }}: {{ filesLinesObj[type] }}&nbsp;
+                  span.bloc(v-bind:title="getFileBlankLineInfo(type)") ({{ filesBlankLinesObj[type] }})
 
         .files(v-if="isLoaded")
           .empty(v-if="files.length===0") nothing to see here :(
-          .file.active(v-for="file in files")
+          .file.active(v-for="file in selectedFiles")
             .title(onclick="toggleNext(this)")
               span {{ file.path }}&nbsp;
               span.loc ({{ file.lineCount }} lines)

diff --git a/frontend/src/static/css/style.scss b/frontend/src/static/css/style.scss
@@ -231,11 +231,14 @@ header{
             font-weight:bold;
             cursor:pointer;
         }
+
         .contribution{
             margin-top:0.1rem;
-            font-size:1.0rem;
             color:mui-color("red");
 
+            .select {
+              font-weight:bold;
+            }
             .loc {
               font-weight:bolder;
             }
@@ -253,10 +256,22 @@ header{
                   content:'';
                 }
             }
+            .checkboxes {
+                label{
+                    float:left;
+                    padding-right:10px;
+                    white-space:nowrap;
+                }
+                span{
+                    margin-left:0.25rem;
+                    vertical-align:middle;
+                }
+            }
         }
     }
 
     .files{
+        clear:left;
         margin-top:2rem;
 
         .file{

diff --git a/frontend/src/static/js/v_authorship.js b/frontend/src/static/js/v_authorship.js
@@ -32,6 +32,10 @@ window.vAuthorship = {
     return {
       isLoaded: false,
       files: [],
+      isSelectAllChecked: true,
+      selectedFileTypes: [],
+      fileTypes: [],
+      selectedFiles: [],
       filesLinesObj: {},
       filesBlankLinesObj: {},
       totalLineCount: "",
@@ -123,8 +127,15 @@ window.vAuthorship = {
       res.sort((a, b) => b.lineCount - a.lineCount);
 
       this.filesLinesObj = this.sortFileTypeAlphabetically(filesInfoObj);
+      for (var file in filesInfoObj) {
+        if (filesInfoObj.hasOwnProperty(file)) {
+          this.selectedFileTypes.push(file);
+          this.fileTypes.push(file);
+        }
+      }
       this.filesBlankLinesObj = filesBlanksInfoObj;
       this.files = res;
+      this.selectedFiles = res;
       this.isLoaded = true;
     },
 
@@ -147,6 +158,32 @@ window.vAuthorship = {
           }), {});
     },
 
+    selectAll() {
+      if (!this.isSelectAllChecked) {
+        this.selectedFileTypes = this.fileTypes;
+        this.selectedFiles = this.files;
+      } else {
+        this.selectedFileTypes = [];
+        this.selectedFiles = [];
+      }
+    },
+
+    selectFile() {
+      setTimeout(this.getSelectedFiles, 0);
+    },
+
+    getSelectedFiles() {
+      if (this.fileTypes.length === this.selectedFileTypes.length) {
+        this.selectedFiles = this.files;
+        this.isSelectAllChecked = true;
+      } else if (this.selectedFileTypes.length === 0) {
+        this.selectedFiles = [];
+        this.isSelectAllChecked = false;
+      } else {
+        this.selectedFiles = this.files.filter((file) => this.selectedFileTypes.includes(file.path.split('.').pop()));
+      }
+    },
+
     getFileBlankLineInfo(fileType) {
       return fileType + ': ' + 'Blank: ' + this.filesBlankLinesObj[fileType]
           + ', Non-Blank: ' + (this.filesLinesObj[fileType] - this.filesBlankLinesObj[fileType]);