feat: add output table filtering, sorting and ordering

static/index.css

@@ -74,6 +74,9 @@ td {
 .margin5px-top {
     margin-top: 5px;
 }
+.margin2px-bottom {
+    margin-bottom: 2px;
+}
 .background-color-lightgray {
     background-color: lightgray;
 }
@@ -83,8 +86,8 @@ td {
 .max-height-90vh {
     max-height: 90vh;
 }
-.max-height-83vh {
-    max-height: 83vh;
+.max-height-80vh {
+    max-height: 80vh;
 }
 .overflow-hidden {
     /* needed for scroll bar*/
@@ -93,4 +96,10 @@ td {
 .overflow-auto {
     /* needed for scroll bar*/
     overflow: auto;
+}
+.width-50perc {
+    width: 50%;
+}
+.width-80perc {
+    width: 80%;
 }

static/index.html

@@ -17,16 +17,46 @@
         <div id="id-container-row-global-editor-frequency" class="display-flex">
             <div id="id-col1-editor" class="col-flex50 border-black padding10px margin10px overflow-hidden background-color-lightgray">
                 <h4>Text Editor</h4>
-                <div id="editor" contenteditable="true" class="max-height-83vh overflow-auto background-color-whitesmoke" aria-label="editor">
+                <div id="editor" contenteditable="true" class="max-height-80vh overflow-auto background-color-whitesmoke" aria-label="editor">
                     Hi there, how are you? There are some pasties for you. Can you give me also... Take a pasty from the table there!
                 </div>
             </div>
-            <div id="id-col2-word-frequency" class="col-flex50 border-blue padding10px margin10px overflow-hidden background-color-lightgray">
-                <h4 id="id-word-frequency-table-title">Word Frequency Table</h4>
+            <div id="id-col2-words-frequency" class="col-flex50 border-blue padding10px margin10px overflow-hidden background-color-lightgray">
+                <div class="display-flex">
+                    <div class="width-50perc">
+                        <h4 id="id-words-frequency-table-title">Word Frequency Table</h4>
+                        <input type="text" id="filter-words-frequency" aria-label="filter-words-frequency" placeholder="Filter the output table..." class="width-80perc" />
+                        <button type="submit" id="btn-filter-words-frequency" aria-label="btn-filter-words-frequency" onclick="updateWordFrequencyTables()">Submit</button>
+                    </div>
+                    <div class="display-flex width-50perc margin2px-bottom">
+                        <form id="form2" aria-label="form2">
+                            <fieldset>
+                                <legend>Sorting method:</legend>
+                                <div>
+                                    <input type="radio" id="sort-by-count" aria-label="sort-by-count" name="sort" value="count"/>
+                                    <label for="sort-by-count" id="sort-by-count-label" aria-label="sort-by-count-label">Count</label>
+                                    <input type="radio" id="sort-by-name" aria-label="sort-by-name" name="sort" value="word_prefix" />
+                                    <label for="sort-by-name" id="sort-by-name-label" aria-label="sort-by-name-label">Name</label>
+                                </div>
+                            </fieldset>
+                        </form>
+                        <form id="form1" aria-label="form1">
+                            <fieldset>
+                                <legend>Order:</legend>
+                                <div>
+                                    <input type="radio" id="order-by-count" aria-label="order-by-count" name="order" value="asc" />
+                                    <label for="order-by-count" id="order-by-count-label" aria-label="order-by-count-label">Ascending</label>
+                                    <input type="radio" id="order-by-name" aria-label="order-by-name" name="order" value="desc" checked/>
+                                    <label for="order-by-name" id="order-by-name-label" aria-label="order-by-name-label">Descending</label>
+                                </div>
+                            </fieldset>
+                        </form>
+                    </div>
+                </div>
                 <span id="id-n-total-rows" aria-label="id-n-total-rows" class="display-none"></span>
                 <span id="waiting-for-be" class="display-none">waiting for backend response...</span>
                 <span id="waiting-for-be-error" class="display-none">Error!</span>
-                <div id="words-frequency" class="max-height-83vh overflow-auto background-color-whitesmoke" aria-label="words-frequency"></div>
+                <div id="words-frequency" class="max-height-80vh overflow-auto background-color-whitesmoke" aria-label="words-frequency"></div>
             </div>
         </div>
     </body>

static/index.js

@@ -1,4 +1,15 @@
 const wordsFrequencyTableTitleText = "Word Frequency Table"
+let wfo = {
+    "word_frequency": {},
+    "nTotalRows": null
+}
+
+const getFormDataByKey = (formId, key) => {
+    let formElement = document.getElementById(formId)
+    const data = new FormData(formElement);
+    let dataValue = data.get(key)
+    return dataValue
+}
 
 /**
  * Read and preview a selected text file.
@@ -33,7 +44,6 @@ const previewFile = () => {
 const scrollToGivenPoint = (editorElement, line, nTotalRows, negativeOffsetPerc=0.12) => {
     // try to scroll div to row... font-size on div is 12px
     let scrollHeight = parseFloat(editorElement.scrollHeight, 10)
-    console.log(`setCaret::updatedOffsetPosition:scroll to line/height position/int height position:", ${line}, ${editorElement.scrollHeight}, ${scrollHeight}`)
     let offsetToScrollPerc = line / nTotalRows
     let offsetToScroll = scrollHeight * offsetToScrollPerc
     // if already at the end of the page, don't scroll anymore to avoid missing words in the upper side of the viewport
@@ -41,7 +51,6 @@ const scrollToGivenPoint = (editorElement, line, nTotalRows, negativeOffsetPerc=
         offsetToScroll -= offsetToScroll * negativeOffsetPerc
     }
     let offsetToScrollInt = parseInt(offsetToScroll, 10)
-    console.log(`setCaret::offsetToScroll: '${offsetToScrollInt}', '${offsetToScroll}'`)
     editorElement.scrollTo(0, offsetToScrollInt)
 }
 
@@ -99,7 +108,7 @@ const getWordFrequency = async () => {
     let bodyRequest = {"text": text.innerText}
     setElementCssClass("waiting-for-be-error", "display-none")
     setElementCssClass("waiting-for-be", "display-block")
-    let wordsFrequencyTableTitleEl = document.getElementById("id-word-frequency-table-title")
+    let wordsFrequencyTableTitleEl = document.getElementById("id-words-frequency-table-title")
     wordsFrequencyTableTitleEl.innerText = wordsFrequencyTableTitleText
     let wordsFrequency = document.getElementById("words-frequency")
     wordsFrequency.innerHTML = ""
@@ -108,14 +117,12 @@ const getWordFrequency = async () => {
             method: "POST",
             body: JSON.stringify(bodyRequest)
         })
-        console.log(`getWordFreq::response.status: '${response.status}'`)
         console.assert(response.status, 200)
         let bodyResponseJson = await response.json()
         setElementCssClass("waiting-for-be", "display-none")
-        console.log(`getWordFreq::body keys: '${Object.keys(bodyResponseJson)}'`)
         let freq = bodyResponseJson["words_frequency"]
         let nTotalRows = bodyResponseJson["n_total_rows"]
-        console.log(`getWordFreq::tot: '${nTotalRows}'`)
+        console.log(`getWordFreq::nTotalRows: '${nTotalRows}'`)
         populateWordFrequencyTables(freq, bodyResponseJson["n_total_rows"])
     } catch (err) {
         console.error("getWordFrequency::err:", err, "#")
@@ -124,6 +131,64 @@ const getWordFrequency = async () => {
     }
 }
 
+function dynamicsort(property, order) {
+    let sort_order = 1;
+    if(order === "desc"){
+        sort_order = -1;
+    }
+    return function (a, b){
+        // a should come before b in the sorted order
+        if(a[property] < b[property]){
+                return -1 * sort_order;
+        // a should come after b in the sorted order
+        }else if(a[property] > b[property]){
+                return 1 * sort_order;
+        // a and b are the same
+        }else{
+                return 0 * sort_order;
+        }
+    }
+}
+
+function filteredArray(arr, key, value) {
+    const newArray = [];
+    for(let i=0, l=arr.length; i<l; i++) {
+        let currentElement = arr[i]
+        let currentValue = currentElement[key]
+        if(currentValue.toLowerCase().includes(value)) {
+            newArray.push(arr[i]);
+        }
+    }
+   return newArray;
+}
+
+const updateWordFrequencyTables = () => {
+    let nTotalRows = wfo["nTotalRows"]
+    if (nTotalRows === null || nTotalRows < 1) {
+        alert("let's get some data before updating the result table...")
+    }
+
+    let _wfo = wfo["word_frequency"]
+    let reduced = Object.values(_wfo)
+    let order = getFormDataByKey("form1", "order")
+    let sort = getFormDataByKey("form2", "sort")
+    reduced.sort(dynamicsort(sort, order))
+
+    let inputFilter = document.getElementById("filter-words-frequency")
+    let inputFilterValue = inputFilter.value
+    if (inputFilterValue != undefined && inputFilter.value !== "") {
+        reduced = filteredArray(reduced, "word_prefix", inputFilterValue)
+    }
+
+    let wordsFrequency = document.getElementById("words-frequency")
+    wordsFrequency.innerHTML = ""
+    let wordsFrequencyTableTitleEl = document.getElementById("id-words-frequency-table-title")
+    wordsFrequencyTableTitleEl.innerText = `${wordsFrequencyTableTitleText} (${reduced.length} word groups, ${nTotalRows} rows)`
+    for (let i=0; i<reduced.length; i++ ) {
+        insertCurrentTable(i, reduced[i], nTotalRows, wordsFrequency);
+    }
+}
+
 /**
  * Populate the word frequency tables in the UI with data from the provided JSON object.
  *
@@ -131,15 +196,9 @@ const getWordFrequency = async () => {
  * @param {number} nTotalRows - The total number of lines/rows to display for each word group.
  */
 const populateWordFrequencyTables = (wordsFrequencyObj, nTotalRows) => {
-    const wfo = JSON.parse(wordsFrequencyObj)
-    const reduced = Object.values(wfo)
-    let wordsFrequency = document.getElementById("words-frequency")
-    wordsFrequency.innerHTML = ""
-    let wordsFrequencyTableTitleEl = document.getElementById("id-word-frequency-table-title")
-    wordsFrequencyTableTitleEl.innerText = `${wordsFrequencyTableTitleText} (${reduced.length} word groups, ${nTotalRows} rows)`
-    for (let i=0; i<reduced.length; i++ ) {
-        insertCurrentTable(i, reduced[i], nTotalRows, wordsFrequency);
-    }
+    wfo["word_frequency"] = JSON.parse(wordsFrequencyObj)
+    wfo["nTotalRows"] = nTotalRows
+    updateWordFrequencyTables()
 }
 
 /**