feat: refactor frontend, improve css style

static/index.css

@@ -5,6 +5,21 @@ h1 {
     margin-block-start: 5px;
     margin-block-end: 5px;
 }
+h4 {
+    font-size: 18px;
+    margin-block-start: 2px;
+    margin-block-end: 2px;
+}
+caption {
+    margin-left: 12px;
+    margin-top: 10px;
+    text-align: left;
+    font-weight: bold;
+}
+td {
+    padding-left: 10px;
+    padding-right: 10px;
+}
 .display-none {
     display: none;
 }
@@ -56,6 +71,9 @@ h1 {
 .margin5px-right {
     margin-right: 10px;
 }
+.margin5px-top {
+    margin-top: 5px;
+}
 .background-color-lightgray {
     background-color: lightgray;
 }
@@ -65,8 +83,8 @@ h1 {
 .max-height-90vh {
     max-height: 90vh;
 }
-.max-height-85vh {
-    max-height: 85vh;
+.max-height-83vh {
+    max-height: 83vh;
 }
 .overflow-hidden {
     /* needed for scroll bar*/

static/index.html

@@ -16,16 +16,17 @@
         </div>
         <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">
-                <span>Text Editor</span>
-                <div id="editor" contenteditable="true" class="max-height-85vh overflow-auto background-color-whitesmoke" aria-label="editor">
+                <h4>Text Editor</h4>
+                <div id="editor" contenteditable="true" class="max-height-83vh 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">
-                <span>Word Frequency Table</span>
+                <h4 id="id-word-frequency-table-title">Word Frequency Table</h4>
+                <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-85vh overflow-auto background-color-whitesmoke" aria-label="words-frequency"></div>
+                <div id="words-frequency" class="max-height-83vh overflow-auto background-color-whitesmoke" aria-label="words-frequency"></div>
             </div>
         </div>
     </body>

static/index.js

@@ -1,5 +1,6 @@
+const wordsFrequencyTableTitleText = "Word Frequency Table"
 
-function previewFile() {
+const previewFile = () => {
     const editor = document.getElementById("editor");
     const [file] = document.querySelector("input[type=file]").files;
     const reader = new FileReader();
@@ -12,7 +13,21 @@ function previewFile() {
         reader.readAsText(file);
     }
 }
-function setCaret(line, offsetColumn, nTotalRows, negativeOffsetPerc=0.12) {
+const scrollToGivenPoint = (editorElement, line, nTotalRows, negativeOffsetPerc) => {
+    // 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
+    if (offsetToScrollPerc < (1 - negativeOffsetPerc)) {
+        offsetToScroll -= offsetToScroll * negativeOffsetPerc
+    }
+    let offsetToScrollInt = parseInt(offsetToScroll, 10)
+    console.log("setCaret::offsetToScroll:", offsetToScrollInt, "|", offsetToScroll, "#")
+    editorElement.scrollTo(0, offsetToScrollInt)
+}
+const setCaret = (line, offsetColumn, nTotalRows, negativeOffsetPerc=0.12) => {
     let editorElement = document.getElementById("editor");
     let validChildNodes = []
     // use a for loop because of better performance
@@ -31,18 +46,7 @@ function setCaret(line, offsetColumn, nTotalRows, negativeOffsetPerc=0.12) {
     sel.removeAllRanges();
     sel.addRange(rng);
     editorElement.focus();
-    // 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
-    if (offsetToScrollPerc < (1-negativeOffsetPerc)) {
-        offsetToScroll -= offsetToScroll*negativeOffsetPerc
-    }
-    let offsetToScrollInt = parseInt(offsetToScroll, 10)
-    console.log("setCaret::offsetToScroll:", offsetToScrollInt, "|", offsetToScroll, "#")
-    editorElement.scrollTo(0, offsetToScrollInt)
+    scrollToGivenPoint(editorElement, line, nTotalRows, negativeOffsetPerc);
 }
 const setElementCssClass = (elementId, currentClass) => {
     let spanWaitingFor = document.getElementById(elementId)
@@ -55,6 +59,8 @@ 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")
+    wordsFrequencyTableTitleEl.innerText = wordsFrequencyTableTitleText
     let wordsFrequency = document.getElementById("words-frequency")
     wordsFrequency.innerHTML = ""
     try {
@@ -62,68 +68,78 @@ const getWordFrequency = async () => {
             method: "POST",
             body: JSON.stringify(bodyRequest)
         })
-        console.log("getWordFreq::response.status:", response.status, "#")
+        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), "#")
+        console.log(`getWordFreq::body keys: '${Object.keys(bodyResponseJson)}'`)
         let freq = bodyResponseJson["words_frequency"]
         let nTotalRows = bodyResponseJson["n_total_rows"]
-        console.log("getWordFreq::tot;:", nTotalRows, "#")
-        populateWordFrequencyTable(freq, bodyResponseJson["n_total_rows"])
+        console.log(`getWordFreq::tot: '${nTotalRows}'`)
+        populateWordFrequencyTables(freq, bodyResponseJson["n_total_rows"])
     } catch (err) {
         console.error("getWordFrequency::err:", err, "#")
         setElementCssClass("waiting-for-be", "display-none")
         setElementCssClass("waiting-for-be-error", "display-block")
     }
 }
-const populateWordFrequencyTable = (wordsFrequencyObj, nTotalRows) => {
+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++ ) {
-        let iReduced = reduced[i]
-        let currentTableWordFreq = document.createElement("table")
-        currentTableWordFreq.setAttribute("class", "border-black")
-        currentTableWordFreq.setAttribute("id", `id-table-${i}-nth`)
-        currentTableWordFreq.setAttribute("aria-label", `id-table-${i}-nth`)
-        currentTableWordFreq.createCaption(`count: ${iReduced["count"]}, word: '${iReduced["word_prefix"]}'`)
-        let currentTHead = document.createElement("thead")
-        let currentTHeadRow = currentTHead.insertRow()
-        currentTHeadRow.insertCell().textContent = 'word'
-        currentTHeadRow.insertCell().textContent = 'row nth'
-        currentTHeadRow.insertCell().textContent = 'offsets'
+        insertCurrentTable(i, reduced[i], nTotalRows, wordsFrequency);
+    }
+}
+const insertCurrentTable = (i, iReduced, nTotalRows, wordsFrequency) => {
+    let currentTableWordFreq = document.createElement("table")
+    currentTableWordFreq.setAttribute("class", "border-black")
+    currentTableWordFreq.setAttribute("id", `id-table-${i}-nth`)
+    currentTableWordFreq.setAttribute("aria-label", `id-table-${i}-nth`)
 
-        let currentTBody = document.createElement("tbody")
-        let offsetsArray = iReduced.offsets_array
-        for (let ii=0; ii < offsetsArray.length; ii++) {
-            let nthOffset = offsetsArray[ii]
-            let nthRowBody = currentTBody.insertRow()
-            nthRowBody.setAttribute("id", `id-table-${i}-row-${ii}-nth`)
-            nthRowBody.setAttribute("aria-label", `id-table-${i}-row-${ii}-nth`)
-            let currentCell = nthRowBody.insertCell()
-            let currentUrl = document.createElement("a")
-            currentUrl.addEventListener("click", function() {
-                let nRow = nthOffset["n_row"]
-                let offsetWord = nthOffset["offsets"]
-                setCaret(nRow, offsetWord, nTotalRows)
-                try {
-                    let oldClassElement = document.getElementsByClassName('underlinedDarkViolet')
-                    oldClassElement[0].className = "underlinedBlue"
-                } catch {
-                    console.log("first click...")
-                }
-                currentUrl.className = "underlinedDarkViolet"
-            })
-            currentUrl.className = "underlinedBlue"
-            currentUrl.innerText = nthOffset["word"]
-            currentCell.appendChild(currentUrl)
-            nthRowBody.insertCell().textContent = nthOffset["n_row"]
-            nthRowBody.insertCell().textContent = nthOffset["offsets"]
-        }
-        currentTableWordFreq.appendChild(currentTHead)
-        currentTableWordFreq.appendChild(currentTBody)
-        wordsFrequency.appendChild(currentTableWordFreq)
+    let currentCaption = currentTableWordFreq.createCaption()
+    currentCaption.setAttribute("aria-label", `id-table-${i}-caption`)
+    currentCaption.innerText = `${iReduced["word_prefix"]}: ${iReduced["count"]} repetitions`
+
+    let currentTHead = document.createElement("thead")
+    let currentTHeadRow = currentTHead.insertRow()
+    currentTHeadRow.insertCell().textContent = 'word'
+    currentTHeadRow.insertCell().textContent = 'row nth'
+    currentTHeadRow.insertCell().textContent = 'offsets'
+
+    let currentTBody = document.createElement("tbody")
+    let offsetsArray = iReduced.offsets_array
+    for (let ii = 0; ii < offsetsArray.length; ii++) {
+        insertCellIntoTRow(currentTBody, i, ii, offsetsArray[ii], nTotalRows)
     }
+    currentTableWordFreq.appendChild(currentTHead)
+    currentTableWordFreq.appendChild(currentTBody)
+    wordsFrequency.appendChild(currentTableWordFreq)
+}
+const insertCellIntoTRow = (currentTBody, i, ii, nthOffset, nTotalRows) => {
+    let nthRowBody = currentTBody.insertRow()
+    nthRowBody.setAttribute("id", `id-table-${i}-row-${ii}-nth`)
+    nthRowBody.setAttribute("aria-label", `id-table-${i}-row-${ii}-nth`)
+    let currentCell = nthRowBody.insertCell()
+    let currentUrl = document.createElement("a")
+    currentUrl.addEventListener("click", function() {
+        let nRow = nthOffset["n_row"]
+        let offsetWord = nthOffset["offsets"]
+        setCaret(nRow, offsetWord, nTotalRows)
+        try {
+            let oldClassElement = document.getElementsByClassName('underlinedDarkViolet')
+            oldClassElement[0].className = "underlinedBlue"
+        } catch {
+            console.log("first click...")
+        }
+        currentUrl.className = "underlinedDarkViolet"
+    })
+    currentUrl.className = "underlinedBlue"
+    currentUrl.innerText = nthOffset["word"]
+    currentCell.appendChild(currentUrl)
+    nthRowBody.insertCell().textContent = nthOffset["n_row"]
+    nthRowBody.insertCell().textContent = nthOffset["offsets"]
 }