Skip to content
Snippets Groups Projects
Commit c5e56692 authored by Stephan Porada's avatar Stephan Porada :speech_balloon:
Browse files

First analys_corpus clean up

parent c416d64a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/static/js/nopaque.analyse_corpus.js 0 → 100644
+ 294
− 0
View file @ c5e56692
// ### Send query functions ###
//function to get current queryData from a given queryFormElement
function getQueryData(queryFormElement) {
// Get query form element and save its data on submit and send this data via
formData = new FormData(queryFormElement);
queryData = {"context": formData.get("context"), // global declaration
"hits_per_page": formData.get("hits_per_page"),
"query": formData.get("query")};
console.log("Query data:", queryData);
return queryData
}
// Function to send a query to the CQP server using queryData gatherd with getQueryData
function sendQuery(event) {
event.preventDefault();
queryData = getQueryData(queryFormElement);
nopaque.socket.emit("corpus_analysis_query", queryData.query);
// full results object declaration, global declaration!
// will always be reset if a query is sent, so that only the chunks of the
// current query will be saved in it
result = {};
result["matches"] = [];
result["cpos_lookup"] = {};
result["text_lookup"] = {};
result["loaded_match_count"] = 0;
result["match_count"] = 0;
result["query"] = "";
// some hiding/showing for loading animation
queryLoadingElement.classList.remove("hide");
queryResultsTableElement.classList.add("hide");
nopaque.toast("Query has been sent!");
resultListOptions = {page: queryData["hits_per_page"],
pagination: [{
name: "paginationTop",
paginationClass: "paginationTop",
innerWindow: 8,
outerWindow: 1
}, {
paginationClass: "paginationBottom",
innerWindow: 8,
outerWindow: 1
}],
valueNames: ["titles", "lc", "hit", "rc", {data: ["index"]}],
item: `<span class="hidden"></span>`};
resultList = new ResultList('result-list', resultListOptions);
resultList.clear(); // empty list for new query
}
// ### Recieve results from sent query and display them in a list etc. ###
// Function used when CQP server sends back the query results using socketio
function recieveResults(response) {
// ERROR code checking
if (response["code"] === 0) {
console.log("[SUCCESS] corpus_analysis_init");
console.log("Code:" + response["code"]);
// further code execution of this code block starting in line 342
} else if (response["code"] === 1) {
queryResultsTableElement.classList.add("hide");
queryLoadingElement.classList.add("hide");
nopaque.toast("Invalid query entered!", "red");
console.log("[ERROR] corpus_analysis_init");
console.log("Code:" + response["code"]);
return; // no further code execution of this code block
} else {
console.log("[ERROR] corpus_analysis_init");
console.log("Code:" + response["code"]);
return; // no further code execution of this code block
}
// logs the current recieved chunk
chunk = {};
chunk = response["result"];
console.log("### corpus_analysis chunk ###");
console.log(chunk);
// logs and extends/push/update the current recieved chunk to the
// result Object
console.log("### corpus analysis updated result json ###");
result["matches"].push(...chunk["matches"]);
Object.assign(result["cpos_lookup"], chunk["cpos_lookup"]);
Object.assign(result["text_lookup"], chunk["text_lookup"]);
result["match_count"] = chunk["match_count"];
console.log("Before Current match count", result["loaded_match_count"]);
result["query"] = queryData["query"];
console.log(result);
// Some hiding and showing of loading animations
queryLoadingElement.classList.add("hide");
queryResultsTableElement.classList.remove("hide");
queryResultsElement.innerHTML = "";
// check if query has any results
if (chunk["matches"].length === 0) {
queryResultsTableElement.classList.add("hide");
nopaque.toast("No results for this query!");
return;
}
// List building/appending the chunks when query had results
match_count = chunk["match_count"];
let count_corpus_files = Object.keys(result["text_lookup"]).length;
var resultItems = []; // list for holding every row item
// get infos for full match row
for (let [index, match] of chunk["matches"].entries()) {
resultItems.push({...match, ...{"index": index + result["loaded_match_count"]}});
}
resultList.add(resultItems, items => {
for (let item of items) {
item.elm = resultList.createResultRowElement(item, chunk);
}
resultList.update();
changeContext(); // sets lr context on first result load
});
result["loaded_match_count"] += Object.keys(chunk["matches"]).length;
console.log("After current match count", result["loaded_match_count"]);
queryResultsMetadataElement.innerHTML = `<p>The query resulted in a total of ${chunk["match_count"]} matches. </p> <p> ${result["loaded_match_count"]} of ${result["match_count"]} matches in ${count_corpus_files} corpus files have been loaded.</p>`;
queryResultsMetadataElement.appendChild(exportQueryResults);
exportQueryResults.classList.remove("hide");
}
// Function to inspect one match, to show more details
function inspect(dataIndex) {
console.log("Inspect!");
console.log(result["matches"][dataIndex]["hit"]);
contextModal.open();
nopaque.socket.emit("inspect_match", {"cpos": result["matches"][dataIndex]["hit"]});
}
// ### Display options changing live how the matches are being displayed ###
// Event function that changes the shown hits per page.
// Just alters the resultList.page property
function changeHitsPerPage(event) {
try {
resultList.page = event.target.value;
resultList.update();
nopaque.toast("Updated matches per page.")
} catch (e) {
console.log("resultList has no results right now. Live update of items per page is useless for now.");
}
}
// Event function triggered on context select change and also if pagination is clicked
function changeContext(event) {
// newValue = event.target.value; // cannot use this anymore due to reuse of this function in the above paginationElements eventListener
console.log("Event", event);
try {
if (event.type === "change") {
nopaque.toast("Updated context per match!");
}
} catch (e) {
console.log(e);
} finally {
var contextPerItemElement = document.getElementById("context");
newValue = contextPerItemElement.value;
console.log(newValue);
var lc = document.getElementsByClassName("left-context");
var rc = document.getElementsByClassName("right-context");
for (let element of lc) {
array = Array.from(element.childNodes);
for (let element of array.slice(newValue)) {
element.classList.add("hide");
}
for (let element of array.slice(0, newValue)) {
element.classList.remove("hide");
}
}
for (let element of rc) {
array = Array.from(element.childNodes);
for (let element of array.slice(newValue)) {
element.classList.add("hide");
}
for (let element of array.slice(0, newValue)) {
element.classList.remove("hide");
}
}
}
}
// ### Expert view event functions ###
// Event function to check if pagination is used and then look if
// expertModeSwitchElement is checked
// if checked than expertModeOn is executed
// if unchecked expertModeOff is executed
function eventHandlerCheck(event) {
console.log("pagination used!");
console.log(expertModeSwitchElement.checked);
if (expertModeSwitchElement.checked) {
expertModeOn(event.currentTarget.tokenElements, result);
} else if (!expertModeSwitchElement.checked) {
event.preventDefault();
console.log("prevented! Destroy");
expertModeOff(event.currentTarget.tokenElements);
}
}
// function to apply extra information and animation to every token
function expertModeOn(tokenElements, result_lookup) {
console.log("expertModeOn!");
for (tokenElement of tokenElements) {
tokenElement.classList.add("chip");
tokenElement.classList.add("hoverable");
tokenElement.classList.add("expert-view");
token = result_lookup["cpos_lookup"][tokenElement.dataset.cpos];
tokenElement.addEventListener("mouseover", function(event) {
console.log("Mouseover!");
console.log(event.target);
token = result_lookup["cpos_lookup"][event.target.dataset.cpos];
addToolTipToTokenElement(event.target, token);
})
}
}
// fuction that creates Tooltip for one token and extracts the corresponding
// infos from the result JSON
function addToolTipToTokenElement(tokenElement, token) {
M.Tooltip.init(tokenElement,
{"html": `<table>
<tr>
<th>Token information</th>
<th>Source information</th>
</tr>
<tr>
<td class="left-align">
Word: ${token["word"]}<br>
Lemma: ${token["lemma"]}<br>
POS: ${token["pos"]}<br>
Simple POS: ${token["simple_pos"]}<br>
NER: ${token["ner"]}
</td>
<td class="left-align">
Title: ${result["text_lookup"][token["text"]]["title"]}<br>
Author: ${result["text_lookup"][token["text"]]["author"]}<br>
Publishing year: ${result["text_lookup"][token["text"]]["publishing_year"]}
</td>
</tr>
</table>`,
"inDuration": 1500,
"margin": 15,
"position": "top",
"transitionMovement": 0});
}
// function to remove extra informations and animations from tokens
function expertModeOff(tokenElements) {
console.log("expertModeOff!");
for (tokenElement of tokenElements) {
tokenElement.classList.remove("chip");
tokenElement.classList.remove("hoverable");
tokenElement.classList.remove("expert-view");
tokenElement.outerHTML = tokenElement.outerHTML; // this is actually a workaround, but it works pretty fast
}
}
// ### Download results functions ###
// function creates a unique and safe filename for the download
function createDownloadFilename() {
// get and create metadata
console.log("Create Metadata!");
var today = new Date();
var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
var safeFilename = result['query'].replace(/[^a-z0-9_-]/gi, "_");
var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename;
return resultFilename
}
// function to download the results as JSON
function downloadJSONRessource(resultFilename) {
// stringify JSON object for json download
var dataStr = JSON.stringify(result, undefined, "\t"); // use tabs to save some space
// get downloadResultsElement
downloadElement = document.getElementById("download-results-json");
// start actual download
download(downloadElement, dataStr, resultFilename, "text/json", ".json")
}
// Function to download data as a Blob created from a string, should be multi purpose
function download(downloadElem, dataStr, filename, type, filenameSlug) {
console.log("Start Download!");
filename += filenameSlug;
var file = new Blob([dataStr], {type: type});
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // Others
var url = URL.createObjectURL(file);
downloadElem.href = url;
downloadElem.download = filename;
}
}
\ No newline at end of file
app/templates/corpora/analyse_corpus.html.j2
+ 9
− 272
View file @ c5e56692
...@@ -218,7 +218,9 @@ server side --> ...@@ -218,7 +218,9 @@ server side -->
</div> </div>
</div> </div>
<script src="{{ url_for('static', filename='js/nopaque.analyse_corpus.js') }}"> <!-- Loading external script -->
<script src="{{ url_for('static', filename='js/nopaque.analyse_corpus.js') }}"></script>
<script>
// Initialising some modals for later usage // Initialising some modals for later usage
var contextModal; var contextModal;
...@@ -264,70 +266,14 @@ server side --> ...@@ -264,70 +266,14 @@ server side -->
var result; var result;
var resultList; var resultList;
//function to get queryData
function getQueryData(queryFormElement) {
// Get query form element and save its data on submit and send this data via
formData = new FormData(queryFormElement);
queryData = {"context": formData.get("context"), // global declaration
"hits_per_page": formData.get("hits_per_page"),
"query": formData.get("query")};
return queryData
}
// socket.io analysis submit to the CQP server // socket.io analysis submit to the CQP server
let queryFormElement = document.getElementById("query-form"); let queryFormElement = document.getElementById("query-form");
queryFormElement.addEventListener("submit", sendQuery); queryFormElement.addEventListener("submit", sendQuery);
function sendQuery(event) {
event.preventDefault();
queryData = getQueryData(queryFormElement);
nopaque.socket.emit("corpus_analysis_query", queryData.query);
// full results object declaration, kind of global maybe store it later?
// will always be reset if a query is sent, so that only the chunks of the
// current query will be saved in it
result = {};
result["matches"] = [];
result["cpos_lookup"] = {};
result["text_lookup"] = {};
result["loaded_match_count"] = 0;
result["match_count"] = 0;
result["query"] = "";
// some hiding/showing for loading animation
queryLoadingElement.classList.remove("hide");
queryResultsTableElement.classList.add("hide");
nopaque.toast("Query has been sent!");
resultListOptions = {page: queryData["hits_per_page"],
pagination: [{
name: "paginationTop",
paginationClass: "paginationTop",
innerWindow: 8,
outerWindow: 1
}, {
paginationClass: "paginationBottom",
innerWindow: 8,
outerWindow: 1
}],
valueNames: ["titles", "lc", "hit", "rc", {data: ["index"]}],
item: `<span class="hidden"></span>`};
resultList = new ResultList('result-list', resultListOptions);
resultList.clear(); // empty list for new query
}
// live update of hits per page // live update of hits per page
var hitsPerPageInputElement = document.getElementById("hits-per-page"); var hitsPerPageInputElement = document.getElementById("hits-per-page");
hitsPerPageInputElement.onchange = changeHitsPerPage; hitsPerPageInputElement.onchange = changeHitsPerPage;
function changeHitsPerPage(event) {
try {
resultList.page = event.target.value;
resultList.update();
nopaque.toast("Updated matches per page.")
} catch (e) {
console.log("resultList has no results right now. Live update of items per page is useless for now.");
}
}
// live update of lr context per item if context value is changed // live update of lr context per item if context value is changed
var contextPerItemElement = document.getElementById("context-per-item"); var contextPerItemElement = document.getElementById("context-per-item");
contextPerItemElement.onchange = changeContext; contextPerItemElement.onchange = changeContext;
...@@ -338,154 +284,14 @@ server side --> ...@@ -338,154 +284,14 @@ server side -->
element.addEventListener("click", changeContext); element.addEventListener("click", changeContext);
} }
// event triggered on context select change and also if pagination is clicked
function changeContext(event) {
// newValue = event.target.value; // cannot use this anymore due to reuse of this function in the above paginationElements eventListener
console.log("Event", event);
try {
if (event.type === "change") {
nopaque.toast("Updated context per match!");
}
} catch (e) {
console.log(e);
} finally {
var contextPerItemElement = document.getElementById("context");
newValue = contextPerItemElement.value;
console.log(newValue);
var lc = document.getElementsByClassName("left-context");
var rc = document.getElementsByClassName("right-context");
for (let element of lc) {
array = Array.from(element.childNodes);
for (let element of array.slice(newValue)) {
element.classList.add("hide");
}
for (let element of array.slice(0, newValue)) {
element.classList.remove("hide");
}
}
for (let element of rc) {
array = Array.from(element.childNodes);
for (let element of array.slice(newValue)) {
element.classList.add("hide");
}
for (let element of array.slice(0, newValue)) {
element.classList.remove("hide");
}
}
}
}
// socket.on triggered when result chunks are recieved // socket.on triggered when result chunks are recieved
nopaque.socket.on("corpus_analysis_query", function(response) { nopaque.socket.on("corpus_analysis_query", recieveResults);
// ERROR code checking
if (response["code"] === 0) {
console.log("[SUCCESS] corpus_analysis_init");
console.log("Code:" + response["code"]);
// further code execution of this code block starting in line 342
} else if (response["code"] === 1) {
queryResultsTableElement.classList.add("hide");
queryLoadingElement.classList.add("hide");
nopaque.toast("Invalid query entered!", "red");
console.log("[ERROR] corpus_analysis_init");
console.log("Code:" + response["code"]);
return; // no further code execution of this code block
} else {
console.log("[ERROR] corpus_analysis_init");
console.log("Code:" + response["code"]);
return; // no further code execution of this code block
}
// logs the current recieved chunk
chunk = {};
chunk = response["result"];
console.log("### corpus_analysis chunk ###");
console.log(chunk);
// logs and extends/push/update the current recieved chunk to the
// result Object
console.log("### corpus analysis updated result json ###");
result["matches"].push(...chunk["matches"]);
Object.assign(result["cpos_lookup"], chunk["cpos_lookup"]);
Object.assign(result["text_lookup"], chunk["text_lookup"]);
result["match_count"] = chunk["match_count"];
console.log("Before Current match count", result["loaded_match_count"]);
result["query"] = queryData["query"];
console.log(result);
// Some hiding and showing of loading animations
queryLoadingElement.classList.add("hide");
queryResultsTableElement.classList.remove("hide");
queryResultsElement.innerHTML = "";
// check if query has any results
if (chunk["matches"].length === 0) {
queryResultsTableElement.classList.add("hide");
nopaque.toast("No results for this query!");
return;
}
// List building/appending the chunks when query had results
match_count = chunk["match_count"];
let count_corpus_files = Object.keys(result["text_lookup"]).length;
var resultItems = []; // list for holding every row item // add onclick to download JSON button and download the file
// get infos for full match row var downloadResultsJSONElement = document.getElementById("download-results-json")
for (let [index, match] of chunk["matches"].entries()) { downloadResultsJSONElement.onclick = function() {
resultItems.push({...match, ...{"index": index + result["loaded_match_count"]}}); var filename = createDownloadFilename();
} downloadJSONRessource(filename)};
resultList.add(resultItems, items => {
for (let item of items) {
item.elm = resultList.createResultRowElement(item, chunk);
}
resultList.update();
changeContext(); // sets lr context on first result load
});
result["loaded_match_count"] += Object.keys(chunk["matches"]).length;
console.log("After current match count", result["loaded_match_count"]);
queryResultsMetadataElement.innerHTML = `<p>The query resulted in a total of ${chunk["match_count"]} matches. </p> <p> ${result["loaded_match_count"]} of ${result["match_count"]} matches in ${count_corpus_files} corpus files have been loaded.</p>`;
queryResultsMetadataElement.appendChild(exportQueryResults);
exportQueryResults.classList.remove("hide");
});
// inspect match functions
function inspect(dataIndex) {
console.log("Inspect!");
console.log(result["matches"][dataIndex]["hit"]);
contextModal.open();
nopaque.socket.emit("inspect_match", {"cpos": result["matches"][dataIndex]["hit"]});
}
function downloadRessource(downloadElement, mimeTypeString, filenameSlug) {
// get and create metadata
console.log("Create Metadata!");
var today = new Date();
var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
var safeFilename = result['query'].replace(/[^a-z0-9_-]/gi, "_");
var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename;
// stringify JSON object for json download
var dataStr = JSON.stringify(result, undefined, 2);
// get downloadResultsElement
downloadElement = document.getElementById("download-results-json");
// start actual download
download(downloadElement, dataStr, resultFilename, mimeTypeString, filenameSlug)
}
// add onclick to download buttons
var downloadResultsJSONElement = document.getElementById("download-results-json");
downloadResultsJSONElement.onclick = function() {downloadRessource(downloadResultsJSONElement, "text/json", ".json")};
var downloadResultsCSVElement = document.getElementById("download-results-csv");
downloadResultsCSVElement.onclick = function() {downloadRessource(downloadResultsCSVElement, "text/plain", ".txt")};
// Function to download data to a file
function download(downloadElem, data, filename, type, filenameSlug) {
console.log("Start Download!");
filename += filenameSlug;
var file = new Blob([data], {type: type});
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // Others
var url = URL.createObjectURL(file);
downloadElem.href = url;
downloadElem.download = filename;
}
}
// epxert mode table view // epxert mode table view
var expertModeSwitchElement = document.getElementById("expert-mode-switch"); var expertModeSwitchElement = document.getElementById("expert-mode-switch");
...@@ -506,75 +312,6 @@ server side --> ...@@ -506,75 +312,6 @@ server side -->
} }
}) })
function eventHandlerCheck(event) {
console.log("pagination used!");
console.log(expertModeSwitchElement.checked);
if (expertModeSwitchElement.checked) {
expertModeOn(event.currentTarget.tokenElements, result);
} else if (!expertModeSwitchElement.checked) {
event.preventDefault();
console.log("prevented! Destroy");
expertModeOff(event.currentTarget.tokenElements);
}
}
function expertModeOff(tokenElements) {
console.log("expertModeOff!");
for (tokenElement of tokenElements) {
tokenElement.classList.remove("chip");
tokenElement.classList.remove("hoverable");
tokenElement.classList.remove("expert-view");
tokenElement.outerHTML = tokenElement.outerHTML; // TODO fix this in a proper way
// console.log("Token", tokenElement);
// console.log("Tooltip property:", tokenElement.M_Tooltip);
// tokenElement.M_Tooltip.destroy();
// console.log("Destroy!");
}
}
function expertModeOn(tokenElements, result_lookup) {
console.log("expertModeOn!");
for (tokenElement of tokenElements) {
tokenElement.classList.add("chip");
tokenElement.classList.add("hoverable");
tokenElement.classList.add("expert-view");
token = result_lookup["cpos_lookup"][tokenElement.dataset.cpos];
tokenElement.addEventListener("mouseover", function(event) {
console.log("Mouseover!");
console.log(event.target);
token = result_lookup["cpos_lookup"][event.target.dataset.cpos];
addToolTipToTokenElement(event.target, token);
})
}
}
function addToolTipToTokenElement(tokenElement, token) {
M.Tooltip.init(tokenElement,
{"html": `<table>
<tr>
<th>Token information</th>
<th>Source information</th>
</tr>
<tr>
<td class="left-align">
Word: ${token["word"]}<br>
Lemma: ${token["lemma"]}<br>
POS: ${token["pos"]}<br>
Simple POS: ${token["simple_pos"]}<br>
NER: ${token["ner"]}
</td>
<td class="left-align">
Title: ${result["text_lookup"][token["text"]]["title"]}<br>
Author: ${result["text_lookup"][token["text"]]["author"]}<br>
Publishing year: ${result["text_lookup"][token["text"]]["publishing_year"]}
</td>
</tr>
</table>`,
"inDuration": 1500,
"margin": 15,
"position": "top",
"transitionMovement": 0});
}
// collapsible display options // collapsible display options
var elem = document.querySelector('.collapsible.expandable'); var elem = document.querySelector('.collapsible.expandable');
</script> </script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment