mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Make analyse OOP style
This commit is contained in:
parent
6260f2436a
commit
90ef828e61
@ -1,8 +1,77 @@
|
||||
class Results {
|
||||
constructor(results, resultsList) {
|
||||
this.resultsJSON = results;
|
||||
constructor(resultsJSON, resultsList) {
|
||||
this.resultsJSON = resultsJSON;
|
||||
this.resultsList = resultsList;
|
||||
}
|
||||
|
||||
|
||||
clear_all() {
|
||||
this.resultsList.clear();
|
||||
this.resultsList.update();
|
||||
this.resultsJSON.init();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class ResultsJSON {
|
||||
// Sets empty object structure. Also usefull to delete old results.
|
||||
init(matchCount = 0) {
|
||||
this["matches"] = []; // list of all c with lc and rc
|
||||
this["cpos_lookup"] = {}; // object contains all this key value pair
|
||||
this["text_lookup"] = {}; // same as above for all text ids
|
||||
this["match_count"] = matchCount;
|
||||
}
|
||||
|
||||
// get query as string from form Element
|
||||
getQueryStr(queryFormElement) {
|
||||
// gets query
|
||||
let queryFormData;
|
||||
let queryStr;
|
||||
queryFormData = new FormData(queryFormElement);
|
||||
queryStr = queryFormData.get("query-form-query");
|
||||
this["query"] = queryStr;
|
||||
}
|
||||
|
||||
// function creates a unique and safe filename for the download
|
||||
createDownloadFilename() {
|
||||
let today;
|
||||
let currentDate;
|
||||
let currentTime;
|
||||
let safeFilename;
|
||||
let resultFilename;
|
||||
// get and create metadata
|
||||
today = new Date();
|
||||
currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
|
||||
currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
|
||||
safeFilename = this.query.replace(/[^a-z0-9_-]/gi, "_");
|
||||
resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename;
|
||||
return resultFilename
|
||||
}
|
||||
|
||||
// Function to download data as a Blob created from a string, should be multi purpose
|
||||
download(downloadElem, dataStr, filename, type, filenameSlug) {
|
||||
let file;
|
||||
console.log("Start Download!");
|
||||
filename += filenameSlug;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// function to download the results as JSON
|
||||
downloadJSONRessource(resultFilename) {
|
||||
let dataStr;
|
||||
let downloadElement;
|
||||
// stringify JSON object for json download
|
||||
dataStr = JSON.stringify(results.resultsJSON, undefined, "\t"); // use tabs to save some space
|
||||
// get downloadResultsElement
|
||||
downloadElement = document.getElementById("download-results-json");
|
||||
// start actual download
|
||||
this.download(downloadElement, dataStr, resultFilename, "text/json", ".json")
|
||||
}
|
||||
}
|
@ -1,279 +0,0 @@
|
||||
// ###### Helper functions ######
|
||||
|
||||
// get query as string from form Element
|
||||
function getQueryStr(queryFormElement) {
|
||||
// gets query
|
||||
let queryFormData;
|
||||
let queryStr;
|
||||
queryFormData = new FormData(queryFormElement);
|
||||
queryStr = queryFormData.get("query-form-query");
|
||||
return queryStr
|
||||
}
|
||||
|
||||
// get display options from display options form element
|
||||
function getDisplayOptions(displayOptionsFormElement) {
|
||||
// gets display options parameters
|
||||
let displayOptionsFormData
|
||||
let displayOptionsData;
|
||||
displayOptionsFormData = new FormData(displayOptionsFormElement);
|
||||
displayOptionsData = {"resultsPerPage": displayOptionsFormData.get("display-options-form-results_per_page"),
|
||||
"resultsContex": displayOptionsFormData.get("display-options-form-result_context"),
|
||||
"expertMode": displayOptionsFormData.get("display-options-form-expert_mode")};
|
||||
console.log(displayOptionsData);
|
||||
return displayOptionsData
|
||||
}
|
||||
|
||||
// ###### Download results functions ######
|
||||
// TODO: Maybe write these as class functions? For this maybe create a result class
|
||||
|
||||
// function creates a unique and safe filename for the download
|
||||
function createDownloadFilename() {
|
||||
let today;
|
||||
let currentDate;
|
||||
let currentTime;
|
||||
let safeFilename;
|
||||
let resultFilename;
|
||||
// get and create metadata
|
||||
console.log("Create Metadata!");
|
||||
today = new Date();
|
||||
currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
|
||||
currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
|
||||
safeFilename = results.resultsJSON["query"].replace(/[^a-z0-9_-]/gi, "_");
|
||||
resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename;
|
||||
return resultFilename
|
||||
}
|
||||
|
||||
// function to download the results as JSON
|
||||
function downloadJSONRessource(resultFilename) {
|
||||
let dataStr;
|
||||
let downloadElement;
|
||||
// stringify JSON object for json download
|
||||
dataStr = JSON.stringify(results.resultsJSON, 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) {
|
||||
let file;
|
||||
console.log("Start Download!");
|
||||
filename += filenameSlug;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// ###### Functions to inspect one match, to show more details ######
|
||||
|
||||
// activate inspect buttons if queryFinished is true
|
||||
function activateInspect() {
|
||||
console.log("activation progress", progress);
|
||||
if (progress === 100) {
|
||||
let inspectBtnElements;
|
||||
inspectBtnElements = document.getElementsByClassName("inspect");
|
||||
for (let inspectBtn of inspectBtnElements) {
|
||||
inspectBtn.classList.remove("disabled");
|
||||
}
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
//gets result cpos infos for one dataIndex to send back to the server
|
||||
function inspect(dataIndex) {
|
||||
// This function should be in the AnalysisClient class as a method.
|
||||
console.log("Inspect!");
|
||||
console.log(results.resultsJSON.matches[dataIndex].c);
|
||||
contextResultsElement = document.getElementById("context-results");
|
||||
contextResultsElement.innerHTML = ""; // clear it from old inspects
|
||||
contextModal.open();
|
||||
nopaque.socket.emit("corpus_analysis_inspect_match",
|
||||
{payload: {
|
||||
first_cpos: results.resultsJSON.matches[dataIndex].c[0],
|
||||
last_cpos: results.resultsJSON.matches[dataIndex].c[1]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showMatchContext(response) {
|
||||
let contextData = response.payload
|
||||
let contextResultsElement;
|
||||
let contextModalLoading;
|
||||
let contextModalReady;
|
||||
let expertModeSwitchElement
|
||||
let partElement
|
||||
let token;
|
||||
let tokenElement;
|
||||
let tokenElements;
|
||||
console.log("###### match_context ######");
|
||||
console.log("Incoming data:", contextData);
|
||||
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
|
||||
contextResultsElement = document.getElementById("context-results");
|
||||
|
||||
if (contextData.cpos_ranges == true) {
|
||||
// python range like function from MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Sequence_generator_(range)
|
||||
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
|
||||
lc = range(contextData.match.lc[0], contextData.match.lc[1], 1)
|
||||
c = range(contextData.match.c[0], contextData.match.c[1], 1)
|
||||
rc = range(contextData.match.rc[0], contextData.match.rc[1], 1)
|
||||
} else {
|
||||
lc = contextData.match.lc;
|
||||
c = contextData.match.c;
|
||||
rc = contextData.match.rc;
|
||||
}
|
||||
|
||||
partElement = document.createElement("p");
|
||||
for (let cpos of lc) {
|
||||
token = contextData["cpos_lookup"][cpos];
|
||||
partElement.insertAdjacentHTML("beforeend", `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
}
|
||||
for (let cpos of c) {
|
||||
token = contextData["cpos_lookup"][cpos];
|
||||
partElement.insertAdjacentHTML("beforeend", `<span class="token bold underline" data-cpos="${cpos}" style="text-decoration-line: underline;">${token["word"]} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
}
|
||||
for (let cpos of rc) {
|
||||
token = contextData["cpos_lookup"][cpos];
|
||||
partElement.insertAdjacentHTML("beforeend", `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
}
|
||||
if (expertModeSwitchElement.checked) {
|
||||
tokenElements = partElement.getElementsByClassName("token");
|
||||
expertModeOn(tokenElements, contextData);
|
||||
}
|
||||
}
|
||||
|
||||
// ###### Display options changing live how the matches are being displayed ######
|
||||
|
||||
// Event function that changes the shown hits per page.
|
||||
// Just alters the resultsList.page property
|
||||
function changeHitsPerPage(event) {
|
||||
try {
|
||||
resultsList.page = event.target.value;
|
||||
resultsList.update();
|
||||
nopaque.flash("Updated matches per page.")
|
||||
} catch (e) {
|
||||
console.log("resultsList 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) {
|
||||
let newContextValue;
|
||||
let lc;
|
||||
let rc;
|
||||
let array;
|
||||
try {
|
||||
if (event.type === "change") {
|
||||
nopaque.flash("Updated context per match!");
|
||||
}
|
||||
} catch (e) {
|
||||
// console.log(e);
|
||||
// console.log("This error is expected.");
|
||||
} finally {
|
||||
newContextValue = document.getElementById("display-options-form-result_context").value;
|
||||
console.log("Context value is:", newContextValue);
|
||||
lc = document.getElementsByClassName("left-context");
|
||||
rc = document.getElementsByClassName("right-context");
|
||||
for (let element of lc) {
|
||||
array = Array.from(element.childNodes);
|
||||
for (let element of array.slice(newContextValue)) {
|
||||
element.classList.add("hide");
|
||||
}
|
||||
for (let element of array.slice(0, newContextValue)) {
|
||||
element.classList.remove("hide");
|
||||
}
|
||||
}
|
||||
for (let element of rc) {
|
||||
array = Array.from(element.childNodes);
|
||||
for (let element of array.slice(newContextValue)) {
|
||||
element.classList.add("hide");
|
||||
}
|
||||
for (let element of array.slice(0, newContextValue)) {
|
||||
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, resultsJSON);
|
||||
} 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, results) {
|
||||
let token;
|
||||
|
||||
console.log("expertModeOn!");
|
||||
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", function(event) {
|
||||
console.log("Mouseover!");
|
||||
console.log(event.target);
|
||||
token = results["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: ${resultsJSON["text_lookup"][token["text"]]["title"]}<br>
|
||||
Author: ${resultsJSON["text_lookup"][token["text"]]["author"]}<br>
|
||||
Publishing year: ${resultsJSON["text_lookup"][token["text"]]["publishing_year"]}
|
||||
</td>
|
||||
</tr>
|
||||
</table>`});
|
||||
}
|
||||
|
||||
// function to remove extra informations and animations from tokens
|
||||
function expertModeOff(tokenElements) {
|
||||
console.log("expertModeOff!");
|
||||
for (let 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
|
||||
}
|
||||
}
|
@ -11,11 +11,10 @@ function querySetup(payload) {
|
||||
textLookupCountElement.innerText = "0";
|
||||
matchCountElement.innerText = payload.match_count;
|
||||
// always re initializes results to delete old results from it
|
||||
results.resultsJSON["matches"] = []; // list of all c with lc and rc
|
||||
results.resultsJSON["cpos_lookup"] = {}; // object contains all cpos as key value pair
|
||||
results.resultsJSON["text_lookup"] = {}; // same as above for all text ids
|
||||
results.resultsJSON["match_count"] = payload.match_count;
|
||||
results.resultsJSON["query"] = getQueryStr(queryFormElement);
|
||||
// this has to be done here again because teh last chunk from old results was still being recieved
|
||||
results.clear_all()
|
||||
// Get query string again
|
||||
results.resultsJSON.getQueryStr(queryFormElement);
|
||||
}
|
||||
|
||||
function queryRenderResults(payload) {
|
||||
@ -39,7 +38,7 @@ function queryRenderResults(payload) {
|
||||
item.elm = resultsList.createResultRowElement(item, payload.chunk);
|
||||
}
|
||||
resultsList.update();
|
||||
changeContext(); // sets lr context on first result load
|
||||
results.resultsList.changeContext(); // sets lr context on first result load
|
||||
});
|
||||
// incorporating new chunk results into full results
|
||||
results.resultsJSON.matches.push(...payload.chunk.matches);
|
||||
@ -55,11 +54,11 @@ function queryRenderResults(payload) {
|
||||
queryResultsProgressElement.classList.add("hide");
|
||||
queryResultsUserFeedbackElement.classList.add("hide");
|
||||
queryResultsExportElement.classList.remove("disabled");
|
||||
activateInspect();
|
||||
ResultsList.activateInspect();
|
||||
}
|
||||
// inital expert mode check and activation
|
||||
if (expertModeSwitchElement.checked) {
|
||||
let initialTokenElements = document.getElementsByClassName("token");
|
||||
expertModeOn(initialTokenElements, resultsJSON);
|
||||
results.resultsList.expertModeOn(initialTokenElements, resultsJSON);
|
||||
}
|
||||
}
|
@ -120,6 +120,228 @@ RessourceList.options = {
|
||||
|
||||
class ResultsList extends List {
|
||||
|
||||
// get display options from display options form element
|
||||
static getDisplayOptions(displayOptionsFormElement) {
|
||||
// gets display options parameters
|
||||
let displayOptionsFormData
|
||||
let displayOptionsData;
|
||||
displayOptionsFormData = new FormData(displayOptionsFormElement);
|
||||
displayOptionsData = {"resultsPerPage": displayOptionsFormData.get("display-options-form-results_per_page"),
|
||||
"resultsContex": displayOptionsFormData.get("display-options-form-result_context"),
|
||||
"expertMode": displayOptionsFormData.get("display-options-form-expert_mode")};
|
||||
return displayOptionsData
|
||||
}
|
||||
|
||||
// ###### Functions to inspect one match, to show more details ######
|
||||
// activate inspect buttons if queryFinished is true
|
||||
static activateInspect() {
|
||||
if (progress === 100) {
|
||||
let inspectBtnElements;
|
||||
inspectBtnElements = document.getElementsByClassName("inspect");
|
||||
for (let inspectBtn of inspectBtnElements) {
|
||||
inspectBtn.classList.remove("disabled");
|
||||
}
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
//gets result cpos infos for one dataIndex to send back to the server
|
||||
inspect(dataIndex) {
|
||||
// This function should be in the AnalysisClient class as a method.
|
||||
console.log("Inspect!");
|
||||
console.log(results.resultsJSON.matches[dataIndex].c);
|
||||
let contextResultsElement = document.getElementById("context-results");
|
||||
contextResultsElement.innerHTML = ""; // clear it from old inspects
|
||||
contextModal.open();
|
||||
nopaque.socket.emit("corpus_analysis_inspect_match",
|
||||
{payload: {
|
||||
first_cpos: results.resultsJSON.matches[dataIndex].c[0],
|
||||
last_cpos: results.resultsJSON.matches[dataIndex].c[1]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showMatchContext(response) {
|
||||
let contextData = response.payload
|
||||
let contextResultsElement;
|
||||
let contextModalLoading;
|
||||
let contextModalReady;
|
||||
let expertModeSwitchElement
|
||||
let partElement
|
||||
let token;
|
||||
let tokenElement;
|
||||
let tokenElements;
|
||||
let lc;
|
||||
let c;
|
||||
let rc;
|
||||
console.log("###### match_context ######");
|
||||
console.log("Incoming data:", contextData);
|
||||
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
|
||||
contextResultsElement = document.getElementById("context-results");
|
||||
|
||||
if (contextData.cpos_ranges == true) {
|
||||
// python range like function from MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Sequence_generator_(range)
|
||||
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
|
||||
lc = range(contextData.match.lc[0], contextData.match.lc[1], 1)
|
||||
c = range(contextData.match.c[0], contextData.match.c[1], 1)
|
||||
rc = range(contextData.match.rc[0], contextData.match.rc[1], 1)
|
||||
} else {
|
||||
lc = contextData.match.lc;
|
||||
c = contextData.match.c;
|
||||
rc = contextData.match.rc;
|
||||
}
|
||||
|
||||
partElement = document.createElement("p");
|
||||
for (let cpos of lc) {
|
||||
token = contextData["cpos_lookup"][cpos];
|
||||
partElement.insertAdjacentHTML("beforeend", `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
}
|
||||
for (let cpos of c) {
|
||||
token = contextData["cpos_lookup"][cpos];
|
||||
partElement.insertAdjacentHTML("beforeend", `<span class="token bold light-green" data-cpos="${cpos}" style="text-decoration-line: underline;">${token["word"]} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
}
|
||||
for (let cpos of rc) {
|
||||
token = contextData["cpos_lookup"][cpos];
|
||||
partElement.insertAdjacentHTML("beforeend", `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
|
||||
contextResultsElement.append(partElement);
|
||||
}
|
||||
if (expertModeSwitchElement.checked) {
|
||||
tokenElements = partElement.getElementsByClassName("token");
|
||||
console.log(this);
|
||||
this.expertModeOn(tokenElements, contextData);
|
||||
}
|
||||
}
|
||||
|
||||
// ###### Display options changing live how the matches are being displayed ######
|
||||
|
||||
// Event function that changes the shown hits per page.
|
||||
// Just alters the resultsList.page property
|
||||
changeHitsPerPage(event) {
|
||||
try {
|
||||
resultsList.page = event.target.value;
|
||||
resultsList.update();
|
||||
nopaque.flash("Updated matches per page.")
|
||||
} catch (e) {
|
||||
console.log("resultsList 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
|
||||
changeContext(event) {
|
||||
let newContextValue;
|
||||
let lc;
|
||||
let rc;
|
||||
let array;
|
||||
try {
|
||||
if (event.type === "change") {
|
||||
nopaque.flash("Updated context per match!");
|
||||
}
|
||||
} catch (e) {
|
||||
// console.log(e);
|
||||
// console.log("This error is expected.");
|
||||
} finally {
|
||||
newContextValue = document.getElementById("display-options-form-result_context").value;
|
||||
console.log("Context value is:", newContextValue);
|
||||
lc = document.getElementsByClassName("left-context");
|
||||
rc = document.getElementsByClassName("right-context");
|
||||
for (let element of lc) {
|
||||
array = Array.from(element.childNodes);
|
||||
for (let element of array.slice(newContextValue)) {
|
||||
element.classList.add("hide");
|
||||
}
|
||||
for (let element of array.slice(0, newContextValue)) {
|
||||
element.classList.remove("hide");
|
||||
}
|
||||
}
|
||||
for (let element of rc) {
|
||||
array = Array.from(element.childNodes);
|
||||
for (let element of array.slice(newContextValue)) {
|
||||
element.classList.add("hide");
|
||||
}
|
||||
for (let element of array.slice(0, newContextValue)) {
|
||||
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
|
||||
eventHandlerCheck(event) {
|
||||
console.log("pagination used!");
|
||||
console.log(expertModeSwitchElement.checked);
|
||||
if (expertModeSwitchElement.checked) {
|
||||
this.expertModeOn(event.currentTarget.tokenElements, resultsJSON);
|
||||
} else if (!expertModeSwitchElement.checked) {
|
||||
event.preventDefault();
|
||||
console.log("prevented! Destroy");
|
||||
this.expertModeOff(event.currentTarget.tokenElements);
|
||||
}
|
||||
}
|
||||
|
||||
// function to apply extra information and animation to every token
|
||||
expertModeOn(tokenElements, results) {
|
||||
let token;
|
||||
|
||||
console.log("expertModeOn!");
|
||||
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) => {
|
||||
console.log("Mouseover!");
|
||||
console.log(event.target);
|
||||
token = results["cpos_lookup"][event.target.dataset.cpos];
|
||||
this.addToolTipToTokenElement(event.target, token);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// fuction that creates Tooltip for one token and extracts the corresponding
|
||||
// infos from the result JSON
|
||||
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: ${resultsJSON["text_lookup"][token["text"]]["title"]}<br>
|
||||
Author: ${resultsJSON["text_lookup"][token["text"]]["author"]}<br>
|
||||
Publishing year: ${resultsJSON["text_lookup"][token["text"]]["publishing_year"]}
|
||||
</td>
|
||||
</tr>
|
||||
</table>`});
|
||||
}
|
||||
|
||||
// function to remove extra informations and animations from tokens
|
||||
expertModeOff(tokenElements) {
|
||||
console.log("expertModeOff!");
|
||||
for (let 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
|
||||
}
|
||||
}
|
||||
|
||||
createResultRowElement(item, chunk) {
|
||||
let values, cpos, token, matchRowElement, lcCellElement, hitCellElement, rcCellElement, textTitlesCellElement, matchNrElement, lc, c, rc;
|
||||
// gather values from item
|
||||
@ -164,7 +386,7 @@ class ResultsList extends List {
|
||||
var inspectBtn = document.createElement("a");
|
||||
inspectBtn.setAttribute("class", "btn-floating btn-flat waves-effect waves-light grey right inspect disabled");
|
||||
inspectBtn.innerHTML = '<i class="material-icons">search</i>';
|
||||
inspectBtn.onclick = function() {inspect(values["index"])};
|
||||
inspectBtn.onclick = () => {this.inspect(values["index"])};
|
||||
}
|
||||
// add text titles at front as first td of one row
|
||||
hitCellElement.appendChild(inspectBtn);
|
||||
|
@ -216,8 +216,6 @@
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/nopaque.analyse_corpus.js') }}">
|
||||
</script>
|
||||
<script>
|
||||
// ###### Defining global variables used in other functions ######
|
||||
var results; // results object
|
||||
@ -247,7 +245,7 @@
|
||||
displayOptionsFormElement = document.getElementById("display-options-form");
|
||||
|
||||
// js list options and intialization
|
||||
let displayOptionsData = getDisplayOptions(displayOptionsFormElement);
|
||||
let displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
|
||||
let resultsListOptions = {page: displayOptionsData["resultsPerPage"],
|
||||
pagination: [{
|
||||
name: "paginationTop",
|
||||
@ -287,9 +285,9 @@
|
||||
exportModal = M.Modal.init(exportModal, {"dismissible": true});
|
||||
initModal = M.Modal.init(initDisplayElement, {"dismissible": false});
|
||||
// Init corpus analysis components
|
||||
resultsJSON = {};
|
||||
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);
|
||||
@ -315,30 +313,30 @@
|
||||
queryFormElement.addEventListener("submit", (event) => {
|
||||
// Prevent page from reloading on submit
|
||||
event.preventDefault();
|
||||
// empty list for new query
|
||||
resultsList.clear();
|
||||
// empty ResultsList and ResultsJSON for new query
|
||||
results.clear_all()
|
||||
// Get query string and send query to server
|
||||
let queryStr = getQueryStr(queryFormElement);
|
||||
client.query(queryStr);
|
||||
results.resultsJSON.getQueryStr(queryFormElement);
|
||||
client.query(results.resultsJSON.query);
|
||||
});
|
||||
|
||||
// get context of one match if inspected via socket.io
|
||||
nopaque.socket.on("match_context", showMatchContext);
|
||||
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 = changeHitsPerPage;
|
||||
hitsPerPageInputElement.onchange = results.resultsList.changeHitsPerPage;
|
||||
|
||||
// live update of lr context per item if context value is changed
|
||||
contextPerItemElement = document.getElementById("display-options-form-result_context");
|
||||
contextPerItemElement.onchange = changeContext;
|
||||
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) {
|
||||
element.addEventListener("click", changeContext);
|
||||
element.addEventListener("click", activateInspect);
|
||||
element.addEventListener("click", results.resultsList.changeContext);
|
||||
element.addEventListener("click", ResultsList.activateInspect);
|
||||
}
|
||||
|
||||
// epxert mode table view
|
||||
@ -347,14 +345,14 @@
|
||||
let paginationElements = document.getElementsByClassName("pagination");
|
||||
if (event.target.checked) {
|
||||
console.log("Checked!");
|
||||
expertModeOn(currentTokenElements, resultsJSON);
|
||||
results.resultsList.expertModeOn(currentTokenElements, resultsJSON);
|
||||
for (element of paginationElements) {
|
||||
element.tokenElements = currentTokenElements;
|
||||
element.addEventListener("click", eventHandlerCheck);
|
||||
element.addEventListener("click", (event) => { results.resultsList.eventHandlerCheck(event)});
|
||||
}
|
||||
} else {
|
||||
console.log("Unchecked!");
|
||||
expertModeOff(currentTokenElements);
|
||||
results.resultsList.expertModeOff(currentTokenElements);
|
||||
console.log("unchecked! Destroy");
|
||||
}
|
||||
});
|
||||
@ -368,7 +366,7 @@
|
||||
// add onclick to download JSON button and download the file
|
||||
downloadResultsJSONElement = document.getElementById("download-results-json")
|
||||
downloadResultsJSONElement.onclick = function() {
|
||||
let filename = createDownloadFilename();
|
||||
downloadJSONRessource(filename)};
|
||||
let filename = results.resultsJSON.createDownloadFilename();
|
||||
results.resultsJSON.downloadJSONRessource(filename)};
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
Loading…
Reference in New Issue
Block a user