From 58295b986d5fceaae30536b18bd62ab1e99d0de6 Mon Sep 17 00:00:00 2001 From: Stephan Porada Date: Thu, 30 Apr 2020 15:21:55 +0200 Subject: [PATCH] Rename some things. Add metadata to downloadable json --- app/static/js/nopaque.Results.js | 24 ++++++----- app/static/js/nopaque.callbacks.js | 38 +++++++++--------- app/static/js/nopaque.lists.js | 16 ++++---- app/templates/corpora/analyse_corpus.html.j2 | 42 +++++++++++--------- 4 files changed, 65 insertions(+), 55 deletions(-) diff --git a/app/static/js/nopaque.Results.js b/app/static/js/nopaque.Results.js index d8a89682..89bd0299 100644 --- a/app/static/js/nopaque.Results.js +++ b/app/static/js/nopaque.Results.js @@ -1,20 +1,20 @@ class Results { - constructor(resultsJSON, resultsList , resultsMetaData) { - this.resultsJSON = resultsJSON; - this.resultsList = resultsList; - this.resultsMetaData = resultsMetaData + constructor(data, jsList , metaData) { + this.data = data; + this.jsList = jsList; + this.metaData = metaData } clearAll() { - this.resultsList.clear(); - this.resultsList.update(); - this.resultsJSON.init(); - this.resultsMetaData.init(); + this.jsList.clear(); + this.jsList.update(); + this.data.init(); + this.metaData.init(); } } -class ResultsJSON { +class Data { // Sets empty object structure. Also usefull to delete old results. // matchCount default is 0 init(matchCount = 0) { @@ -24,6 +24,10 @@ class ResultsJSON { this["match_count"] = matchCount; } + addData(jsonData) { + Object.assign(this, jsonData); + } + // get query as string from form Element getQueryStr(queryFormElement) { // gets query @@ -77,7 +81,7 @@ class ResultsJSON { } } -class ResultsMetaData { +class MetaData { // Sets empty object structure when no input is given. // Else it works like a delete. init(json = {}) { diff --git a/app/static/js/nopaque.callbacks.js b/app/static/js/nopaque.callbacks.js index 40fd3758..48246c7b 100644 --- a/app/static/js/nopaque.callbacks.js +++ b/app/static/js/nopaque.callbacks.js @@ -1,5 +1,5 @@ function recvMetaData(payload) { - results.resultsMetaData.init(payload) + results.metaData.init(payload) // results.metaDataJSON.corpus_name = payload.corpus_name; // results.metaDataJSON.corpus_description = payload.corpus_description; // results.metaDataJSON.corpus_creation_date = payload.corpus_creation_date; @@ -10,7 +10,7 @@ function recvMetaData(payload) { // results.metaDataJSON.corpus_analysis_date = payload.corpus_analysis_date; // results.metaDataJSON.corpus_cqi_py_version = payload.corpus_cqi_py_version; // results.metaDataJSON.corpus_cqpserver_version = payload.corpus_cqpserver_version; - console.log(results.resultsMetaData); + console.log(results.metaData); } function querySetup(payload) { @@ -28,8 +28,8 @@ function querySetup(payload) { // this has to be done here again because the last chunk from old results was still being recieved results.clearAll() // Get query string again - results.resultsJSON.getQueryStr(queryFormElement); - results.resultsJSON.match_count = payload.match_count; + results.data.getQueryStr(queryFormElement); + results.data.match_count = payload.match_count; } function queryRenderResults(payload) { @@ -37,9 +37,9 @@ function queryRenderResults(payload) { // This is called when results are transmitted and being recieved console.log("Current recieved chunk:", payload.chunk); if (payload.chunk.cpos_ranges == true) { - results.resultsJSON["cpos_ranges"] = true; + results.data["cpos_ranges"] = true; } else { - results.resultsJSON["cpos_ranges"] = false; + results.data["cpos_ranges"] = false; } // update progress bar queryResultsDeterminateElement.style.width = `${payload.progress}%`; @@ -47,33 +47,33 @@ function queryRenderResults(payload) { resultItems = []; // list for holding every row item // get infos for full match row for (let [index, match] of payload.chunk.matches.entries()) { - resultItems.push({...match, ...{"index": index + results.resultsJSON.matches.length}}); + resultItems.push({...match, ...{"index": index + results.data.matches.length}}); } - resultsList.add(resultItems, (items) => { + results.jsList.add(resultItems, (items) => { for (let item of items) { - item.elm = resultsList.createResultRowElement(item, payload.chunk); + item.elm = results.jsList.createResultRowElement(item, payload.chunk); } - resultsList.update(); - results.resultsList.changeContext(); // sets lr context on first result load + results.jsList.update(); + results.jsList.changeContext(); // sets lr context on first result load }); // incorporating new chunk results into full results - results.resultsJSON.matches.push(...payload.chunk.matches); - Object.assign(results.resultsJSON.cpos_lookup, payload.chunk.cpos_lookup); - Object.assign(results.resultsJSON.text_lookup, payload.chunk.text_lookup); + results.data.matches.push(...payload.chunk.matches); + Object.assign(results.data.cpos_lookup, payload.chunk.cpos_lookup); + Object.assign(results.data.text_lookup, payload.chunk.text_lookup); // show user current and total match count - receivedMatchCountElement.innerText = `${results.resultsJSON.matches.length}`; - textLookupCountElement.innerText = `${Object.keys(results.resultsJSON.text_lookup).length}`; - console.log("Results recieved:", results.resultsJSON); + receivedMatchCountElement.innerText = `${results.data.matches.length}`; + textLookupCountElement.innerText = `${Object.keys(results.data.text_lookup).length}`; + console.log("Results recieved:", results.data); // upate progress status progress = payload.progress; // global declaration if (progress === 100) { queryResultsProgressElement.classList.add("hide"); queryResultsUserFeedbackElement.classList.add("hide"); queryResultsExportElement.classList.remove("disabled"); - results.resultsList.activateInspect(); + results.jsList.activateInspect(); } // inital expert mode check and activation if (expertModeSwitchElement.checked) { - results.resultsList.expertModeOn("query-display"); + results.jsList.expertModeOn("query-display"); } } \ No newline at end of file diff --git a/app/static/js/nopaque.lists.js b/app/static/js/nopaque.lists.js index bc6d989e..09919626 100644 --- a/app/static/js/nopaque.lists.js +++ b/app/static/js/nopaque.lists.js @@ -175,8 +175,8 @@ class ResultsList extends List { nopaque.socket.emit("corpus_analysis_inspect_match", { payload: { - first_cpos: results.resultsJSON.matches[dataIndex].c[0], - last_cpos: results.resultsJSON.matches[dataIndex].c[1] + first_cpos: results.data.matches[dataIndex].c[0], + last_cpos: results.data.matches[dataIndex].c[1] } } ); @@ -209,8 +209,10 @@ class ResultsList extends List { let tokenHTMlElement; let uniqueS; + // TODO: contextData needs some identifier like match Nr to indicate what context this is. Also use this in the filename this.contextData = response.payload; - this.contextData["query"] = results.resultsJSON.query; + this.contextData["query"] = results.data.query; + Object.assign(this.contextData, results.metaData); contextResultsElement = document.getElementById("context-results"); modalExpertModeSwitchElement = document.getElementById("inspect-display-options-form-expert_mode_inspect"); highlightSentencesSwitchElement = document.getElementById("inspect-display-options-form-highlight_sentences"); @@ -441,7 +443,7 @@ class ResultsList extends List { tooltipEventCreate(event) { // console.log("Create Tooltip on mouseover."); let token; - token = results.resultsJSON.cpos_lookup[event.target.dataset.cpos]; + token = results.data.cpos_lookup[event.target.dataset.cpos]; if (!token) { token = this.contextData.cpos_lookup[event.target.dataset.cpos]; } @@ -488,11 +490,11 @@ class ResultsList extends List { NER: ${token.ner} - Title: ${resultsJSON.text_lookup[token.text].title} + Title: ${results.data.text_lookup[token.text].title}
- Author: ${resultsJSON.text_lookup[token.text].author} + Author: ${results.data.text_lookup[token.text].author}
- Publishing year: ${resultsJSON.text_lookup[token.text].publishing_year} + Publishing year: ${results.data.text_lookup[token.text].publishing_year} `} diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2 index edebe1d3..b0210a2e 100644 --- a/app/templates/corpora/analyse_corpus.html.j2 +++ b/app/templates/corpora/analyse_corpus.html.j2 @@ -292,7 +292,7 @@ var queryResultsUserFeedbackElement; // Element showing match count|total etc var receivedMatchCountElement; // Nr. of loaded matches will be displayed in this element var results; // results object - var resultsJSON; // full JSON object holding match results + var data; // full JSON object holding match results var resultsList; // resultsList object var resultsListOptions; // specifies ResultsList options var textLookupCountElement // Nr of texts the matches occured in will be shown in this element @@ -363,10 +363,10 @@ exportModal = M.Modal.init(exportModal, {"dismissible": true}); initModal = M.Modal.init(initDisplayElement, {"dismissible": false}); // Init corpus analysis components - resultsJSON = new ResultsJSON(); + data = new Data(); resultsList = new ResultsList("result-list", resultsListOptions); - resultsMetaData = new ResultsMetaData(); - results = new Results(resultsJSON, resultsList, resultsMetaData); + resultsMetaData = new MetaData(); + results = new Results(data, resultsList, resultsMetaData); initDisplay = new CorpusAnalysisDisplay(initDisplayElement); queryDisplay = new CorpusAnalysisDisplay(queryDisplayElement); client = new CorpusAnalysisClient({{ corpus_id }}, nopaque.socket); @@ -392,7 +392,7 @@ queryRenderResults(payload); }); client.setCallback("query_match_context", (payload) => { - results.resultsList.showMatchContext(payload); + results.jsList.showMatchContext(payload); }) // Trigger corpus analysis initialization on server side @@ -419,34 +419,34 @@ // Prevent page from reloading on submit event.preventDefault(); // Get query string and send query to server - results.resultsJSON.getQueryStr(queryFormElement); - client.query(results.resultsJSON.query); + results.data.getQueryStr(queryFormElement); + client.query(results.data.query); }); // live update of hits per page if hits per page value is changed - let changeHitsPerPageBind = results.resultsList.changeHitsPerPage.bind(results.resultsList); + let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList); hitsPerPageInputElement.onchange = changeHitsPerPageBind; // live update of lr context per item if context value is changed - contextPerItemElement.onchange = results.resultsList.changeContext; + contextPerItemElement.onchange = results.jsList.changeContext; // eventListener if pagination is used to apply new context size to new page // 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); + element.addEventListener("click", results.jsList.changeContext); + element.addEventListener("click", results.jsList.activateInspect); } expertModeSwitchElement.addEventListener("change", (event) => { if (event.target.checked) { - results.resultsList.expertModeOn("query-display"); + results.jsList.expertModeOn("query-display"); for (let element of paginationElements) { element.onclick = (event) => { - results.resultsList.eventHandlerCheck(event) + results.jsList.eventHandlerCheck(event) } } } else { - results.resultsList.expertModeOff("query-display"); + results.jsList.expertModeOff("query-display"); } }); }); @@ -458,16 +458,20 @@ // add onclick to download JSON button and download the file downloadResultsJSONElement = document.getElementById("download-results-json") downloadResultsJSONElement.onclick = () => { - let filename = results.resultsJSON.createDownloadFilename("matches"); - results.resultsJSON.downloadJSONRessource(filename, results.resultsJSON, downloadResultsJSONElement + let filename = results.data.createDownloadFilename("matches"); + results.data.addData(results.metaData); + results.data.downloadJSONRessource(filename, results.data, + downloadResultsJSONElement )}; // add onclick to download JSON button and download the file downloadInspectContextElement = document.getElementById("inspect-download-context") downloadInspectContextElement.onclick = () => { - let filename = results.resultsJSON.createDownloadFilename("context"); - console.log(filename); - results.resultsJSON.downloadJSONRessource(filename, results.resultsList.contextData, downloadInspectContextElement); + let filename = results.data.createDownloadFilename("context"); + results.data.addData(results.metaData); + results.data.downloadJSONRessource(filename, + results.jsList.contextData, + downloadInspectContextElement); }; {% endblock %}