Merge pull request #269 from nexB/perf-fix

New filter generation system

Author: steven-esser

assets/app/js/controllers/aboutCodeClueDataTable.js

@@ -73,6 +73,10 @@ class AboutCodeClueDataTable extends Controller {
 
     // Get the column's filter select box
     const select = $(`select#clue-${columnName}`);
+    select.empty().append(`<option value="">All</option>`);
+
+    // Add the chart value options and select it.
+    select.append(`<option value="${value}">${value}</option>`);
     select.val(value).change();
   }
 
@@ -101,6 +105,7 @@ class AboutCodeClueDataTable extends Controller {
       scrollX: true,
       scrollResize: true,
       deferRender: true,
+      initComplete: () => this._initComplete(),
       drawCallback: () => this._drawCallback(),
       buttons: [
         {   // Do not allow the first column to be hidden
@@ -279,42 +284,94 @@ class AboutCodeClueDataTable extends Controller {
     });
   }
 
+  _initComplete() {
+    const pathCol = this.dataTable().columns(0);
+
+    const footer = $(pathCol.footer());
+    // keep the buttons horizontally aligned
+    footer.css('white-space', 'nowrap');
+
+    const genFiltersButton = $(`<button id="gen-filters-button" type="button">Generate Filters</button>`);
+    const clearFiltersButton = $(`<button id="clear-filters-button" type="button">Clear Filters</button>`);
+
+    footer.append(genFiltersButton);
+    footer.append(clearFiltersButton);
+      
+    this.dataTable().columns().every(function (columnIndex) {
+      const columnInfo = AboutCodeClueDataTable.TABLE_COLUMNS[columnIndex];
+
+      if ('skipFilter' in columnInfo && columnInfo.skipFilter) {
+        return;
+      }
+
+      const column = this;
+      const footer = $(column.footer());
+      const columnName = columnInfo.name;
+
+      const select = $(`<select id="clue-${columnName}"></select>`)
+        .on('change', function () {
+          const val = $(this).val();
+          column
+            .search(val, false, false)
+            .draw();
+        });
+        
+      footer.append(select);
+    });
+  }
+
   _drawCallback() {
     $('.dataTables_scrollBody').scrollTop(0);
   }
 
-  setColumnFilters() {
+  resetColumnFilters() {
+    $.each(AboutCodeClueDataTable.TABLE_COLUMNS, (i, column) => {
+      const columnSelect = $(`select#clue-${column.name}`);
+      columnSelect.empty();
+      columnSelect.val('');
+      this.dataTable()
+        .column(`${column.name}:name`)
+        .search('', false, false);
+    });
+    // clear the global search box
+    this.dataTable().search('').columns().search('').draw();
+  }
+
+  genFilters() {
+    this.resetColumnFilters();
     const that = this;
-    const pathCol = this.dataTable().columns(0);
 
-    // Add a select element to each column's footer
     this.dataTable().columns().every(function (columnIndex) {
       const columnInfo = AboutCodeClueDataTable.TABLE_COLUMNS[columnIndex];
+      const currentColumn = that.dataTable().columns(columnIndex);
 
       if ('skipFilter' in columnInfo && columnInfo.skipFilter) {
         return;
       }
 
+      // skip columns that are not currently visible
+      if (currentColumn.visible()[0] === false) {
+        return;
+      }
+
       const column = this;
       const footer = $(column.footer());
       const columnName = columnInfo.name;
 
       footer.empty();
-      const select = $(`<select id="clue-${columnName}"></select>`)
+
+      const select = $('#clue-' + columnName)
         .empty()
-        .appendTo(footer)
         .on('change', function () {
           const val = $(this).val();
           column
             .search(val, false, false)
             .draw();
         });
 
-      const currPath = pathCol.search()[0];
+      const currPath = that._selectedPath;
       const where = { path: { $like: `${currPath}%`} };
-
-      where[columnName] = {$ne: null};
-
+      
       that.db().sync.then((db) => db.FlatFile.findAll({
         attributes: [
           Sequelize.fn('TRIM',  Sequelize.col(columnName)),
@@ -342,6 +399,7 @@ class AboutCodeClueDataTable extends Controller {
             select.append(`<option value="${filterValue}">${filterValue}</option>`);
           });
         });
+      footer.append(select);
     });
   }
 

assets/app/js/renderer.js

@@ -89,21 +89,19 @@ $(document).ready(() => {
   const jstree = new AboutCodeJsTree('#jstree', aboutCodeDB)
     .on('node-edit', (node) => componentDialog.show(node.id))
     .on('node-selected', (node) => {
-      cluesTable.columns(0).search(node.id);
-      cluesTable.setColumnFilters();
-
-      // update all views with the new selected path.
-      componentDialog.selectedPath(node.id);
-      dejaCodeExportDialog.selectedPath(node.id);
-      jstree.selectedPath(node.id);
-      cluesTable.selectedPath(node.id);
-      componentsTable.selectedPath(node.id);
-      dashboard.selectedPath(node.id);
-      barChart.selectedPath(node.id);
-
-      redrawCurrentView();
+      updateViewsByPath(node.id);
     });
 
+  $(document).on('click', '#gen-filters-button', () => { 
+    cluesTable.genFilters(); 
+    updateViewsByPath(cluesTable._selectedPath);
+  });
+
+  $(document).on('click', '#clear-filters-button', () => { 
+    cluesTable.resetColumnFilters(); 
+    updateViewsByPath(cluesTable._selectedPath);
+  });
+
   const splitter = new Splitter('#leftCol', '#rightCol')
     .on('drag-end', () => redrawCurrentView());
 
@@ -164,6 +162,21 @@ $(document).ready(() => {
   // Opens the dashboard view when the app is first opened
   showDashboardButton.trigger('click');
 
+  function updateViewsByPath(path) {
+    // Update all the views with the given path string
+    cluesTable.columns(0).search(path);
+
+    componentDialog.selectedPath(path);
+    dejaCodeExportDialog.selectedPath(path);
+    jstree.selectedPath(path);
+    cluesTable.selectedPath(path);
+    componentsTable.selectedPath(path);
+    dashboard.selectedPath(path);
+    barChart.selectedPath(path);
+
+    redrawCurrentView();
+  }
+
   /** Creates the database and all View objects from a SQLite file */
   function loadDatabase(fileName) {
     // Create a new database when importing a json file