Spaces:

aletrn
/

mgw

Sleeping

App Files Files Community

alessandro trinca tornidor commited on May 10

Commit

1b77e8d

1 Parent(s): 87def91

feeat: new layout separating the list of prefix frequencies from the table of word positions

Browse files

Files changed (3) hide show

static/index.css +2 -2
static/index.html +7 -4
static/index.js +57 -26

static/index.css CHANGED Viewed

@@ -31,12 +31,12 @@
     text-decoration-color: darkturquoise;
     text-decoration-style: wavy;
 }
-.underlinedBlue {
     color: blue;
     text-decoration: underline;
     text-decoration-color: blue;
 }
-.underlinedDarkViolet {
     color: violet;
     text-decoration: underline;
     text-decoration-color: violet;

     text-decoration-color: darkturquoise;
     text-decoration-style: wavy;
 }
+.underlinedBlue, .underlinedBlueTable {
     color: blue;
     text-decoration: underline;
     text-decoration-color: blue;
 }
+.underlinedDarkViolet, .underlinedDarkVioletTable {
     color: violet;
     text-decoration: underline;
     text-decoration-color: violet;

static/index.html CHANGED Viewed

@@ -7,7 +7,7 @@
         <link rel="stylesheet" href="/static/index.css">
         <script src="/static/index.js"></script>
     </head>
-    <body>
         <h1 id="id-title" class="h1">Words Frequency Statistics in text</h1>
         <div id="id-orientation-message" class="id-orientation-message" aria-hidden="true"><!-- ::before (Mobile users: use this project in landscape mode!) --></div>
         <div class="margin10px">
@@ -60,9 +60,9 @@
                                 <legend>Order:</legend>
                                 <div>
                                     <input type="radio" id="order-by-asc" aria-label="order-by-asc" name="order" value="asc" />
-                                    <label for="order-by-asc" id="order-by-asc-label" aria-label="order-by-asc-label">Ascending</label>
                                     <input type="radio" id="order-by-desc" aria-label="order-by-desc" name="order" value="desc" checked/>
-                                    <label for="order-by-desc" id="order-by-desc-label" aria-label="order-by-desc-label">Descending</label>
                                 </div>
                             </fieldset>
                         </form>
@@ -71,7 +71,10 @@
                 <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-80vh overflow-auto background-color-whitesmoke" aria-label="words-frequency"></div>
             </div>
         </div>

         <link rel="stylesheet" href="/static/index.css">
         <script src="/static/index.js"></script>
     </head>
+    <body class="overflow-hidden">
         <h1 id="id-title" class="h1">Words Frequency Statistics in text</h1>
         <div id="id-orientation-message" class="id-orientation-message" aria-hidden="true"><!-- ::before (Mobile users: use this project in landscape mode!) --></div>
         <div class="margin10px">
                                 <legend>Order:</legend>
                                 <div>
                                     <input type="radio" id="order-by-asc" aria-label="order-by-asc" name="order" value="asc" />
+                                    <label for="order-by-asc" id="order-by-asc-label" aria-label="order-by-asc-label">Ascend</label>
                                     <input type="radio" id="order-by-desc" aria-label="order-by-desc" name="order" value="desc" checked/>
+                                    <label for="order-by-desc" id="order-by-desc-label" aria-label="order-by-desc-label">Descend</label>
                                 </div>
                             </fieldset>
                         </form>
                 <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-80vh overflow-hidden background-color-whitesmoke display-flex" aria-label="words-frequency">
+                    <div id="id-list-of-words" class="margin10px overflow-auto" aria-label="id-list-of-words"></div>
+                    <div id="id-current-table-of-words" class="margin10px overflow-auto" aria-label="id-current-table-of-words"></div>
+                </div>
             </div>
         </div>

static/index.js CHANGED Viewed

@@ -7,6 +7,8 @@ const editorFieldLabel = "editor"
 const remoteWebServer = "http://localhost:7860"
 const underlinedPrimary = "underlinedBlue"
 const underlinedClicked = "underlinedDarkViolet"
 /**
  * Object containing functions for word frequency analysis.
@@ -32,7 +34,7 @@ const wordsFrequencyAnalyzers = {
             })
             console.assert(response.status === 200, `response.status: ${response.status}!`)
             let bodyResponseJson = await response.json()
-            setElementCssClass("waiting-for-be", "display-none")
             let freq = bodyResponseJson["words_frequency"]
             let nTotalRows = bodyResponseJson["n_total_rows"]
             console.log(`getWordsFreq::nTotalRows: '${nTotalRows}'`)
@@ -40,8 +42,8 @@ const wordsFrequencyAnalyzers = {
         } catch (err) {
             console.error("getWordsFrequency::err on webserver request/response:", err, "#")
             console.log(`wordsFrequencyURL:`, typeof wordsFrequency, "=>", wordsFrequencyURL, "#")
-            setElementCssClass("waiting-for-be", "display-none")
-            setElementCssClass("waiting-for-be-error", "display-block")
         }
     },
     /**
@@ -54,15 +56,15 @@ const wordsFrequencyAnalyzers = {
         console.log("use the embedded functionality for word freq analysis...")
         try {
             const bodyResponseJson = textStemming(inputText)
-            setElementCssClass("waiting-for-be", "display-none")
             let freq = bodyResponseJson["wordsStemsDict"]
             let nTotalRows = bodyResponseJson["nTotalRows"]
             console.log(`getWordsFreq::nTotalRows: '${nTotalRows}', populateWordsFrequencyTables...`)
             populateWordsFrequencyTables(freq, nTotalRows)
         } catch (err) {
             console.error("getWordsFrequency::err on useWordfreqWebserver:", err, "#")
-            setElementCssClass("waiting-for-be", "display-none")
-            setElementCssClass("waiting-for-be-error", "display-block")
         }
     }
 }
@@ -470,9 +472,18 @@ function setCaret(line, offsetColumn, nTotalRows, negativeOffsetPerc=0.12) {
  * @param {string} elementId - The ID of the HTML element to update.
  * @param {string} currentClass - The new CSS class to apply to the element.
  */
-const setElementCssClass = (elementId, currentClass) => {
-    let spanWaitingFor = document.getElementById(elementId)
-    spanWaitingFor.setAttribute("class", currentClass)
 }
 function parseWebserverDomain () {
@@ -494,12 +505,14 @@ async function getWordsFrequency() {
     let text = document.getElementById(editorFieldLabel)
     // replace repeated newlines to prepare setCaret() use
     text.innerText = text.innerText.replace(/[\r\n]+/g, '\n')
-    setElementCssClass("waiting-for-be-error", "display-none")
-    setElementCssClass("waiting-for-be", "display-block")
     let wordsFrequencyTableTitleEl = document.getElementById("id-words-frequency-table-title")
     wordsFrequencyTableTitleEl.innerText = wordsFrequencyTableTitleText
-    let wordsFrequency = document.getElementById("words-frequency")
-    wordsFrequency.innerHTML = ""
     const choiceWordFreqAnalyzerEl = document.getElementById('id-input-webserver-wordfreq-checkbox')
     console.log("choiceWordFreqAnalyzerEl checked:", choiceWordFreqAnalyzerEl.checked, "#")
     switch (choiceWordFreqAnalyzerEl.checked) {
@@ -589,13 +602,18 @@ async function updateWordsFrequencyTables() {
         reduced = arrayFilter(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);
     }
 }
 /**
@@ -619,9 +637,9 @@ function populateWordsFrequencyTables(wordsFrequencyObj, nTotalRows) {
  * @param {number} i - The current index being processed (needed for adding unique HTML id/aria-labels).
  * @param {object} iReduced - An object containing the reduced data for the current index, including word prefix, count, and offsets array.
  * @param {number} nTotalRows - The total number of lines/rows in the table.
- * @param {object} wordsFrequency - A container element to hold all tables representing word frequencies.
  */
-function insertCurrentTable(i, iReduced, nTotalRows, wordsFrequency) {
     let currentTableWordsFreq = document.createElement("table")
     currentTableWordsFreq.setAttribute("class", "border-black")
     currentTableWordsFreq.setAttribute("id", `id-table-${i}-nth`)
@@ -644,7 +662,25 @@ function insertCurrentTable(i, iReduced, nTotalRows, wordsFrequency) {
     }
     currentTableWordsFreq.appendChild(currentTHead)
     currentTableWordsFreq.appendChild(currentTBody)
-    wordsFrequency.appendChild(currentTableWordsFreq)
 }
 /**
@@ -666,13 +702,8 @@ function insertCellIntoTRow(currentTBody, i, ii, nthOffset, nTotalRows) {
         let nRow = nthOffset["n_row"]
         let offsetWord = nthOffset["offsets"]
         setCaret(nRow, offsetWord, nTotalRows)
-        try {
-            let oldClassElement = document.getElementsByClassName('underlinedDarkViolet')
-            oldClassElement[0].className = underlinedPrimary
-        } catch {
-            console.log("first click...")
-        }
-        currentUrl.className = underlinedClicked
     })
     currentUrl.className = underlinedPrimary
     currentUrl.innerText = nthOffset["word"]

 const remoteWebServer = "http://localhost:7860"
 const underlinedPrimary = "underlinedBlue"
 const underlinedClicked = "underlinedDarkViolet"
+const underlinedPrimaryTable = "underlinedBlueTable"
+const underlinedClickedTable = "underlinedDarkVioletTable"
 /**
  * Object containing functions for word frequency analysis.
             })
             console.assert(response.status === 200, `response.status: ${response.status}!`)
             let bodyResponseJson = await response.json()
+            setElementCssClassById("waiting-for-be", "display-none")
             let freq = bodyResponseJson["words_frequency"]
             let nTotalRows = bodyResponseJson["n_total_rows"]
             console.log(`getWordsFreq::nTotalRows: '${nTotalRows}'`)
         } catch (err) {
             console.error("getWordsFrequency::err on webserver request/response:", err, "#")
             console.log(`wordsFrequencyURL:`, typeof wordsFrequency, "=>", wordsFrequencyURL, "#")
+            setElementCssClassById("waiting-for-be", "display-none")
+            setElementCssClassById("waiting-for-be-error", "display-block")
         }
     },
     /**
         console.log("use the embedded functionality for word freq analysis...")
         try {
             const bodyResponseJson = textStemming(inputText)
+            setElementCssClassById("waiting-for-be", "display-none")
             let freq = bodyResponseJson["wordsStemsDict"]
             let nTotalRows = bodyResponseJson["nTotalRows"]
             console.log(`getWordsFreq::nTotalRows: '${nTotalRows}', populateWordsFrequencyTables...`)
             populateWordsFrequencyTables(freq, nTotalRows)
         } catch (err) {
             console.error("getWordsFrequency::err on useWordfreqWebserver:", err, "#")
+            setElementCssClassById("waiting-for-be", "display-none")
+            setElementCssClassById("waiting-for-be-error", "display-block")
         }
     }
 }
  * @param {string} elementId - The ID of the HTML element to update.
  * @param {string} currentClass - The new CSS class to apply to the element.
  */
+function setElementCssClassById(elementId, currentClass) {
+    let elementWithClassToChange = document.getElementById(elementId)
+    elementWithClassToChange.setAttribute("class", currentClass)
+}
+function setElementCssClassByOldClass(oldClassName, currentClass) {
+    try {
+        let oldClassElement = document.getElementsByClassName(oldClassName)
+        oldClassElement[0].className = currentClass
+    } catch {
+        console.log("not found...")
+    }
 }
 function parseWebserverDomain () {
     let text = document.getElementById(editorFieldLabel)
     // replace repeated newlines to prepare setCaret() use
     text.innerText = text.innerText.replace(/[\r\n]+/g, '\n')
+    setElementCssClassById("waiting-for-be-error", "display-none")
+    setElementCssClassById("waiting-for-be", "display-block")
     let wordsFrequencyTableTitleEl = document.getElementById("id-words-frequency-table-title")
     wordsFrequencyTableTitleEl.innerText = wordsFrequencyTableTitleText
+    let listOfWords = document.getElementById("id-list-of-words")
+    listOfWords.innerHTML = ""
+    let currentTableOfWords = document.getElementById("id-current-table-of-words")
+    currentTableOfWords.innerHTML = ""
     const choiceWordFreqAnalyzerEl = document.getElementById('id-input-webserver-wordfreq-checkbox')
     console.log("choiceWordFreqAnalyzerEl checked:", choiceWordFreqAnalyzerEl.checked, "#")
     switch (choiceWordFreqAnalyzerEl.checked) {
         reduced = arrayFilter(reduced, "word_prefix", inputFilterValue)
     }
+    let listOfWords = document.getElementById("id-list-of-words")
+    listOfWords.innerHTML = ""
+    let currentTableOfWords = document.getElementById("id-current-table-of-words")
+    currentTableOfWords.innerHTML = ""
     let wordsFrequencyTableTitleEl = document.getElementById("id-words-frequency-table-title")
     wordsFrequencyTableTitleEl.innerText = `${wordsFrequencyTableTitleText} (${reduced.length} word groups, ${nTotalRows} rows)`
+    const wordListElement = document.createElement("list")
     for (let i=0; i<reduced.length; i++ ) {
+        insertListOfWords(i, reduced[i], nTotalRows, wordListElement, currentTableOfWords);
     }
+    listOfWords.append(wordListElement)
 }
 /**
  * @param {number} i - The current index being processed (needed for adding unique HTML id/aria-labels).
  * @param {object} iReduced - An object containing the reduced data for the current index, including word prefix, count, and offsets array.
  * @param {number} nTotalRows - The total number of lines/rows in the table.
+ * @param {object} currentTableOfWords - A container element to hold the current table representing chosen word positions.
  */
+function insertCurrentTable(i, iReduced, nTotalRows, currentTableOfWords) {
     let currentTableWordsFreq = document.createElement("table")
     currentTableWordsFreq.setAttribute("class", "border-black")
     currentTableWordsFreq.setAttribute("id", `id-table-${i}-nth`)
     }
     currentTableWordsFreq.appendChild(currentTHead)
     currentTableWordsFreq.appendChild(currentTBody)
+    currentTableOfWords.appendChild(currentTableWordsFreq)
+}
+function insertListOfWords(i, iReduced, nTotalRows, wordListElement, currentTableOfWords) {
+    const li = document.createElement("li");
+    const a = document.createElement("a")
+    a.innerText = `${iReduced["word_prefix"]}: ${iReduced["count"]} repetitions`
+    a.addEventListener("click",  function() {
+        let currentTableOfWords = document.getElementById("id-current-table-of-words")
+        console.log("currentTableOfWords:", currentTableOfWords.innerText, "#")
+        currentTableOfWords.innerHTML = ""
+        console.log("a::", `${iReduced["word_prefix"]}: ${iReduced["count"]} repetitions`, "#")
+        insertCurrentTable(i, iReduced, nTotalRows, currentTableOfWords)
+        setElementCssClassByOldClass(underlinedClicked, underlinedPrimary)
+        a.className = underlinedClicked
+    });
+    a.className = underlinedPrimary
+    li.appendChild(a);
+    wordListElement.appendChild(li);
 }
 /**
         let nRow = nthOffset["n_row"]
         let offsetWord = nthOffset["offsets"]
         setCaret(nRow, offsetWord, nTotalRows)
+        setElementCssClassByOldClass(underlinedClickedTable, underlinedPrimaryTable)
+        currentUrl.className = underlinedClickedTable
     })
     currentUrl.className = underlinedPrimary
     currentUrl.innerText = nthOffset["word"]