Spaces:

aletrn
/

mgw

Sleeping

App Files Files Community

alessandro trinca tornidor commited on Apr 21

Commit

a05c9de

1 Parent(s): db1a318

feat: add a basic js frontend

Browse files

Files changed (3) hide show

static/index.css +78 -0
static/index.html +32 -0
static/index.js +129 -0

static/index.css ADDED Viewed

	@@ -0,0 +1,78 @@

+h1 {
+    font-size: 24px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-block-start: 5px;
+    margin-block-end: 5px;
+}
+.display-none {
+    display: none;
+}
+.display-block {
+    display: block;
+}
+.underlinedDarkTurquoise {
+    text-decoration: underline;
+    text-decoration-color: darkturquoise;
+    text-decoration-style: wavy;
+}
+.underlinedBlue {
+    color: blue;
+    text-decoration: underline;
+    text-decoration-color: blue;
+}
+.underlinedDarkViolet {
+    color: darkviolet;
+    text-decoration: underline;
+    text-decoration-color: darkviolet;
+}
+.display-flex {
+    display: flex;
+}
+.col-flex30 {
+    flex: 30%;
+}
+.col-flex50 {
+    flex: 50%;
+}
+.border-green {
+    border: 1px solid green;
+}
+.border-blue {
+    border: 1px solid blue;
+}
+.border-black {
+    border: 1px solid black;
+}
+.padding10px {
+    padding: 10px;
+}
+.margin10px {
+    margin: 10px;
+}
+.margin5px-left {
+    margin-left: 10px;
+}
+.margin5px-right {
+    margin-right: 10px;
+}
+.background-color-lightgray {
+    background-color: lightgray;
+}
+.background-color-whitesmoke {
+    background-color: whitesmoke;
+}
+.max-height-90vh {
+    max-height: 90vh;
+}
+.max-height-85vh {
+    max-height: 85vh;
+}
+.overflow-hidden {
+    /* needed for scroll bar*/
+    overflow: hidden;
+}
+.overflow-auto {
+    /* needed for scroll bar*/
+    overflow: auto;
+}

static/index.html ADDED Viewed

	@@ -0,0 +1,32 @@

+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Word Frequency Statistics</title>
+        <link rel="stylesheet" href="/static/index.css">
+        <script src="/static/index.js"></script>
+    </head>
+    <body>
+        <h1 class="h1">Word Frequency Statistics in text</h1>
+        <div class="margin10px">
+            <button id="btn4-getWordFrequency" aria-label="btn4-getWordFrequency" onclick="getWordFrequency()" type="submit">get words frequency</button>
+            <label for="id-input-file-selector" class="margin5px-left">Text file selector</label>
+            <input type="file" onchange="previewFile()" id="id-input-file-selector" aria-label="id-input-file-selector" />
+        </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">
+                    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>
+                <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>
+        </div>
+    </body>
+</html>

static/index.js ADDED Viewed

	@@ -0,0 +1,129 @@

+function previewFile() {
+    const editor = document.getElementById("editor");
+    const [file] = document.querySelector("input[type=file]").files;
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+            // this will then display a text file
+            editor.innerText = reader.result;
+        }, false
+    );
+    if (file) {
+        reader.readAsText(file);
+    }
+}
+function setCaret(line, offsetColumn, nTotalRows, negativeOffsetPerc=0.12) {
+    let editorElement = document.getElementById("editor");
+    let validChildNodes = []
+    // use a for loop because of better performance
+    for (let i=0; i < editorElement.childNodes.length; i++) {
+        let childNode = editorElement.childNodes[i]
+        if (childNode.innerHTML !== "") {
+            validChildNodes.push(childNode)
+        }
+    }
+    let rng = document.createRange();
+    let sel = window.getSelection();
+    let col0 = offsetColumn[0]
+    let col1 = offsetColumn[1]
+    rng.setStart(validChildNodes[line], col0);
+    rng.setEnd(validChildNodes[line], col1)
+    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)
+}
+const setElementCssClass = (elementId, currentClass) => {
+    let spanWaitingFor = document.getElementById(elementId)
+    spanWaitingFor.setAttribute("class", currentClass)
+}
+const getWordFrequency = async () => {
+    let text = document.getElementById("editor")
+    // replace repeated newlines to prepare setCaret() use
+    text.innerText = text.innerText.replace(/[\r\n]+/g, '\n')
+    let bodyRequest = {"text": text.innerText}
+    setElementCssClass("waiting-for-be-error", "display-none")
+    setElementCssClass("waiting-for-be", "display-block")
+    let wordsFrequency = document.getElementById("words-frequency")
+    wordsFrequency.innerHTML = ""
+    try {
+        let response = await fetch("/words-frequency", {
+            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, "#")
+        populateWordFrequencyTable(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 wfo = JSON.parse(wordsFrequencyObj)
+    const reduced = Object.values(wfo)
+    let wordsFrequency = document.getElementById("words-frequency")
+    wordsFrequency.innerHTML = ""
+    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'
+        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)
+    }
+}