From ca333e29ee4b25aef85f0792b710cb239fcb958a Mon Sep 17 00:00:00 2001 From: Stephan Porada Date: Thu, 9 Apr 2020 10:17:04 +0200 Subject: [PATCH] Some fixes and clean up --- app/corpora/events.py | 2 +- app/static/js/nopaque.CorpusAnalysisClient.js | 4 +++ app/static/js/nopaque.Results.js | 2 +- app/static/js/nopaque.callbacks.js | 4 +-- app/static/js/nopaque.lists.js | 25 ++++++++------- app/templates/corpora/analyse_corpus.html.j2 | 31 +++++++++---------- 6 files changed, 36 insertions(+), 32 deletions(-) diff --git a/app/corpora/events.py b/app/corpora/events.py index cf9c791c..ace30421 100644 --- a/app/corpora/events.py +++ b/app/corpora/events.py @@ -108,7 +108,7 @@ def corpus_analysis_inspect_match(payload): match_context = s.export(payload['first_cpos'], payload['last_cpos'], context=3, expand_lists=False) match_context['cpos_ranges'] = True - socketio.emit('match_context', {'payload': match_context}, + socketio.emit('corpus_analysis_match_context', {'payload': match_context}, room=request.sid) diff --git a/app/static/js/nopaque.CorpusAnalysisClient.js b/app/static/js/nopaque.CorpusAnalysisClient.js index 77dd0d6f..cb27822e 100644 --- a/app/static/js/nopaque.CorpusAnalysisClient.js +++ b/app/static/js/nopaque.CorpusAnalysisClient.js @@ -57,6 +57,10 @@ class CorpusAnalysisClient { socket.on("corpus_analysis_query_results", (response) => { if (this.callbacks.query_results != undefined) {this.callbacks.query_results(response.payload);} }); + + // TODO: set callback for this + // get context of one match if inspected via socket.io + socket.on("corpus_analysis_match_context", (response) => { results.resultsList.showMatchContext(response)}); } init() { diff --git a/app/static/js/nopaque.Results.js b/app/static/js/nopaque.Results.js index a27e98c9..f265728f 100644 --- a/app/static/js/nopaque.Results.js +++ b/app/static/js/nopaque.Results.js @@ -4,7 +4,7 @@ class Results { this.resultsList = resultsList; } - clear_all() { + clearAll() { this.resultsList.clear(); this.resultsList.update(); this.resultsJSON.init(); diff --git a/app/static/js/nopaque.callbacks.js b/app/static/js/nopaque.callbacks.js index 26425cc0..a8ae1ad1 100644 --- a/app/static/js/nopaque.callbacks.js +++ b/app/static/js/nopaque.callbacks.js @@ -1,6 +1,6 @@ function querySetup(payload) { // This is called when a query was successfull - // some hiding + // some hiding and resetting queryResultsExportElement.classList.add("disabled"); queryResultsDeterminateElement.style.width = "0%"; queryResultsProgressElement.classList.remove("hide"); @@ -11,7 +11,7 @@ function querySetup(payload) { matchCountElement.innerText = payload.match_count; // always re initializes results to delete old results from it // this has to be done here again because the last chunk from old results was still being recieved - results.clear_all() + results.clearAll() // Get query string again results.resultsJSON.getQueryStr(queryFormElement); } diff --git a/app/static/js/nopaque.lists.js b/app/static/js/nopaque.lists.js index ec571aa7..1e17e8b3 100644 --- a/app/static/js/nopaque.lists.js +++ b/app/static/js/nopaque.lists.js @@ -163,7 +163,8 @@ class ResultsList extends List { contextResultsElement.innerHTML = ""; // clear it from old inspects contextModal.open(); nopaque.socket.emit("corpus_analysis_inspect_match", - {payload: { + { + payload: { first_cpos: results.resultsJSON.matches[dataIndex].c[0], last_cpos: results.resultsJSON.matches[dataIndex].c[1] } @@ -203,22 +204,22 @@ class ResultsList extends List { // create sentence strings as tokens partElement = document.createElement("p"); for (let cpos of lc) { - token = contextData["cpos_lookup"][cpos]; + token = contextData.cpos_lookup[cpos]; partElement.insertAdjacentHTML("beforeend", - `${token["word"]} `); + `${token.word} `); contextResultsElement.append(partElement); } for (let cpos of c) { - token = contextData["cpos_lookup"][cpos]; + token = contextData.cpos_lookup[cpos]; partElement.insertAdjacentHTML("beforeend", `${token["word"]} `); + `style="text-decoration-line: underline;">${token.word} `); contextResultsElement.append(partElement); } for (let cpos of rc) { - token = contextData["cpos_lookup"][cpos]; + token = contextData.cpos_lookup[cpos]; partElement.insertAdjacentHTML("beforeend", - `${token["word"]} `); + `${token.word} `); contextResultsElement.append(partElement); } if (expertModeSwitchElement.checked) { @@ -294,15 +295,14 @@ class ResultsList extends List { } // function to apply extra information and animation to every token - expertModeOn(tokenElements, results) { + expertModeOn(tokenElements) { let token; for (let tokenElement of tokenElements) { tokenElement.classList.add("chip"); tokenElement.classList.add("hoverable"); tokenElement.classList.add("expert-view"); - token = results.cpos_lookup[tokenElement.dataset.cpos]; tokenElement.addEventListener("mouseover", (event) => { - token = results.cpos_lookup[event.target.dataset.cpos]; + token = results.resultsJSON.cpos_lookup[event.target.dataset.cpos]; this.addToolTipToTokenElement(event.target, token); }); } @@ -345,6 +345,7 @@ class ResultsList extends List { tokenElement.classList.remove("hoverable"); tokenElement.classList.remove("expert-view"); tokenElement.outerHTML = tokenElement.outerHTML; // this is actually a workaround, but it works pretty fast + // TODO: use M.Tooltip.destroy() } } @@ -379,7 +380,7 @@ class ResultsList extends List { } // get infos for full match row matchRowElement = document.createElement("tr"); - matchRowElement.setAttribute("data-index", values["index"]) + matchRowElement.setAttribute("data-index", values.index) lcCellElement = document.createElement("td"); lcCellElement.classList.add("left-context"); matchRowElement.appendChild(lcCellElement); @@ -424,7 +425,7 @@ class ResultsList extends List { rcCellElement.classList.add("right-context"); matchRowElement.appendChild(rcCellElement); for (cpos of rc) { - token = chunk["cpos_lookup"][cpos]; + token = chunk.cpos_lookup[cpos]; rcCellElement.insertAdjacentHTML("beforeend", `${token.word} `); } diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2 index a57a2096..31b03be8 100644 --- a/app/templates/corpora/analyse_corpus.html.j2 +++ b/app/templates/corpora/analyse_corpus.html.j2 @@ -247,6 +247,9 @@ var resultsListOptions; // specifies ResultsList options var textLookupCountElement // Nr of texts the matches occured in will be shown in this element var xpath; // xpath to grab first resultsList page pagination element + var hitsPerPageInputElement; + var paginationElements; + var contextPerItemElement; // ###### Initialize variables ###### client = undefined; @@ -267,6 +270,7 @@ queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback"); receivedMatchCountElement = document.getElementById("received-match-count"); textLookupCountElement = document.getElementById("text-lookup-count"); + paginationElements = document.getElementsByClassName("pagination"); // ###### js list options and intialization ###### displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement); @@ -289,20 +293,20 @@ document.addEventListener("DOMContentLoaded", () => { //set accordion of collapsibles to false M.Collapsible.init(collapsibleElements, {accordion: false}); - // creates some models on DOMContentLoaded + // creates some modals on DOMContentLoaded contextModal = M.Modal.init(contextModal, {"dismissible": true}); exportModal = M.Modal.init(exportModal, {"dismissible": true}); initModal = M.Modal.init(initDisplayElement, {"dismissible": false}); // Init corpus analysis components resultsJSON = new ResultsJSON(); resultsList = new ResultsList("result-list", resultsListOptions); - results = new Results(resultsJSON, resultsList) + results = new Results(resultsJSON, resultsList); initDisplay = new CorpusAnalysisDisplay(initDisplayElement); queryDisplay = new CorpusAnalysisDisplay(queryDisplayElement); client = new CorpusAnalysisClient({{ corpus_id }}, nopaque.socket); initModal.open(); - // set displays visibilitys and Callback functions + // set displays and callback functions client.setDisplay("init", initDisplay); client.setCallback("init", () => { initModal.close(); @@ -335,16 +339,11 @@ } // Prevent page from reloading on submit event.preventDefault(); - // empty ResultsList and ResultsJSON for new query - results.clear_all() // Get query string and send query to server results.resultsJSON.getQueryStr(queryFormElement); client.query(results.resultsJSON.query); }); - // get context of one match if inspected via socket.io - nopaque.socket.on("match_context", (response) => { results.resultsList.showMatchContext(response)}); - // live update of hits per page if hits per page value is changed hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page"); hitsPerPageInputElement.onchange = results.resultsList.changeHitsPerPage; @@ -354,22 +353,22 @@ contextPerItemElement.onchange = results.resultsList.changeContext; // eventListener if pagination is used to apply new context size to new page - // and also activate inspect match if queryFinished is true - paginationElements = document.getElementsByClassName("pagination"); - for (element of paginationElements) { + // and also activate inspect match if progress is 100 + for (let element of paginationElements) { element.addEventListener("click", results.resultsList.changeContext); element.addEventListener("click", results.resultsList.activateInspect); } // epxert mode table view - expertModeSwitchElement.addEventListener("change", function(event) { + // TODO: Redo this + expertModeSwitchElement.addEventListener("change", (event) => { let currentTokenElements = document.getElementsByClassName("token"); - let paginationElements = document.getElementsByClassName("pagination"); if (event.target.checked) { results.resultsList.expertModeOn(currentTokenElements, resultsJSON); - for (element of paginationElements) { + for (let element of paginationElements) { element.tokenElements = currentTokenElements; element.addEventListener("click", (event) => { results.resultsList.eventHandlerCheck(event)}); + // TODO: This replicates itself on expertModeSwitchElement use } } else { results.resultsList.expertModeOff(currentTokenElements); @@ -378,13 +377,13 @@ }); // Add onclick to open download modal when Export Results button is pressed - queryResultsExportElement.onclick = function() { + queryResultsExportElement.onclick = () => { exportModal.open(); } // add onclick to download JSON button and download the file downloadResultsJSONElement = document.getElementById("download-results-json") - downloadResultsJSONElement.onclick = function() { + downloadResultsJSONElement.onclick = () => { let filename = results.resultsJSON.createDownloadFilename(); results.resultsJSON.downloadJSONRessource(filename)};