Add GitHub-style filter for columns (fix #37)

website/index.html

@@ -139,23 +139,6 @@
       <section class="modal-card-body">
         <p>Settings will be saved on your local browser and will apply to your future queries.</p><br/>
 
-        <!-- Amount of commit diffs for the automatic filtering. -->
-        <div class="field is-horizontal">
-          <div class="field-label is-normal">
-            <label class="label">Ahead filter:</label>
-          </div>
-          <div class="field-body">
-            <div class="field">
-              <div class="control">
-                <input id="uf_settings_filter" class="input is-small is-fullwidth has-tooltip-arrow"
-                       type="number" value="0" min="1"
-                       placeholder="Default is 0" required>
-              </div>
-              <p class="help mb-2"><strong>Default is 0.</strong> If the amount of 'ahead' commits is less than or equal to this value, the fork is automatically removed from the list.</p>
-            </div>
-          </div>
-        </div>
-
         <!-- Relationship used for the commit diff count. -->
         <div class="field is-horizontal">
           <div class="field-label is-normal">
@@ -195,7 +178,7 @@
                   Display
                 </label>
               </div>
-              <p class="help mb-2"><strong>Default is checked.</strong> Determines whether to display or not the "<span class="is-family-monospace">Export table as CSV</span>" button when a scan ends.</p>
+              <p class="help mb-2"><strong>Default is checked.</strong> Determines whether to display or not the "<span class="is-family-monospace">Export table below as CSV</span>" button when a scan ends.</p>
             </div>
           </div>
         </div>
@@ -231,6 +214,11 @@
             </button>
           </p>
         </div>
+        <div class="control" id="filterContainer" hidden>
+          <input class="input" type="text" id="filter" name="filter"
+                 title='There are aliases too (e.g. "a" for "ahead", "d" for the date, etc.). There is an implicit AND boolean operator in between each filter.'
+                 placeholder="Type your filter here. eg: ahead>=1 behind<5" />
+        </div>
       </div>
     </div>
     <div class="container" id="useful_forks_inject">

website/src/csv-export.js

@@ -3,26 +3,22 @@ const EXPORT_DIV_BTN = "uf_csv_export_btn";
 const EXPORT_BTN = $('<a>', {id: EXPORT_DIV_BTN, class: "button is-dark is-outlined is-small"})
                    .attr("href", "#")
                    .prepend($('<img>', {src: "assets/csv_dl.svg", class: "mr-2", alt: "csv", width: "26", height: "26"}))
-                   .append("Export table as CSV");
+                   .append("Export table below as CSV");
 const EXPORT_DIV = $('<div>', {id: EXPORT_DIV_ID, class: "mt-2"}).append(EXPORT_BTN);
 
 
 function displayCsvExportBtn() {
   if (!UF_SETTINGS_CSV_DISPLAY) {
     return;
   }
-  if (!tableIsEmpty()) {
-    JQ_ID_HEADER.append(EXPORT_DIV);
-    setClickEvent();
-  }
+  JQ_ID_HEADER.append(EXPORT_DIV);
+  setClickEvent();
 }
 function hideExportCsvBtn() {
   if (!UF_SETTINGS_CSV_DISPLAY) {
     return;
   }
-  if (!tableIsEmpty()) {
-    getJqId_$(EXPORT_DIV_ID).remove();
-  }
+  getJqId_$(EXPORT_DIV_ID).remove();
 }
 function setClickEvent() {
   EXPORT_BTN.on('click', function (event) {

website/src/queries-init.js

@@ -1,6 +1,8 @@
 const SELF_URL = "https://useful-forks.github.io/";
 
 const JQ_REPO_FIELD  = $('#repo');
+const JQ_FILTER_FIELD = $('#filter');
+const JQ_FILTER_CONTAINER = $('#filterContainer');
 const JQ_SEARCH_BTN  = $('#searchBtn');
 const JQ_TOTAL_CALLS = $('#totalApiCalls');
 
@@ -21,11 +23,15 @@ const UF_MSG_API_RATE     = "<b>GitHub API rate-limits exceeded.</b> Consider pr
 // list of messages which should not be cleared when the request ends
 const UF_PRESERVED_MSGS = [
     UF_MSG_NO_FORKS,
-    UF_MSG_EMPTY_FILTER,
     UF_MSG_ERROR,
     UF_MSG_API_RATE
 ];
 
+// messages about the current state of the scan but not about the results
+const UF_MSGS_SCAN_STATE = [
+  UF_MSG_SCANNING,
+  UF_MSG_SLOWER
+];
 
 const EXAMPLE_LINK_1 = `<a href="${buildAutoQueryURL('payne911/PieMenu')}"
                            onclick="ga_shortExampleLink();">payne911/PieMenu</a>`;
@@ -102,18 +108,30 @@ function setMsg(msg) {
     .css("border-color", "rgba(0,0,0,0.25)")
     .css("border-style", "solid");
 }
+
+function isMsgEmpty() {
+  return JQ_ID_MSG.html() === "";
+}
+
 function clearMsg() {
   JQ_ID_MSG
     .empty()
     .removeClass("box")
     .css("border-style", "");
-  removeProgressBar();
 }
 function clearNonErrorMsg() {
   const msg = JQ_ID_MSG.html();
   if (!UF_PRESERVED_MSGS.includes(msg))
     clearMsg();
 }
+
+function clearNonScanStateMsg() {
+  const msg = JQ_ID_MSG.html();
+  if (!UF_MSGS_SCAN_STATE.includes(msg) && !UF_PRESERVED_MSGS.includes(msg)) {
+    clearMsg();
+  }
+}
+
 function setHeader(msg) {
   JQ_ID_HEADER.html(msg);
 }
@@ -151,6 +169,21 @@ function getQueryOrDefault(defaultVal) {
   return JQ_REPO_FIELD.val();
 }
 
+function hideFilterContainer() {
+  JQ_FILTER_CONTAINER.hide();
+}
+
+function showFilterContainer() {
+  JQ_FILTER_CONTAINER.show();
+}
+
+function getFilterOrDefault(defaultVal) {
+  if (!JQ_FILTER_FIELD.val()) {
+    JQ_FILTER_FIELD.val(defaultVal);
+  }
+  return JQ_FILTER_FIELD.val();
+}
+
 function setApiCallsLabel(total) {
   JQ_TOTAL_CALLS.html(total + " calls");
 }