sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-04 12:22:47 +00:00
Code Issues Projects Releases Wiki Activity

Fix js

Browse Source
This commit is contained in:
Patrick Jentsch
2019-12-04 10:40:11 +01:00
parent 31ac9ddcf3
commit 904e36a8bb
1 changed files with 57 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
app/templates/corpora/analyse_corpus.html.j2
View File

@@ -146,12 +146,13 @@
<div id="context-modal" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Match context and information</h4>
<div id="loading-data">
<div id="context-modal-loading">
<div class="progress">
<div class="indeterminate"></div>
</div>
</div>
<div id="recieved-data" class="hide">
<div id="context-modal-ready" class="hide">
<div id="context-results"></div>
</div>
</div>
<div class="modal-footer">
@@ -166,10 +167,9 @@
document.addEventListener("DOMContentLoaded", function() {
contextModal = M.Modal.init(document.getElementById("context-modal"),
{"dismissible": true,
onCloseEnd: function() {
document.getElementById("loading-data").classList.remove("hide");
document.getElementById("recieved-data").classList.add("hide");
}
"onCloseEnd": function() {
document.getElementById("context-modal-loading").classList.remove("hide");
document.getElementById("context-modal-ready").classList.add("hide");}
});
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false});
@@ -182,13 +182,15 @@
});
var expertModeSwitchElement = document.getElementById("expert-mode-switch");
var tokenElements = [];
var result;
var lookup = {"cpos": null, "s": null, "text": null};
var matches = null;
var tokenElements = null;
expertModeSwitchElement.addEventListener('change', function(event) {
if (event.target.checked) {
tokenElements.forEach(function(tokenElement) {
tokenElement.classList.add("chip");
token = result["cpos_lookup"][tokenElement.dataset.cpos];
token = lookup["cpos"][tokenElement.dataset.cpos];
addToolTipToTokenElement(tokenElement, token);
});
} else {
@@ -202,7 +204,7 @@
var queryFormElement = document.getElementById("query-form");
var queryFormSubmitElement = document.getElementById("query-form-submit");
var queryResultsElement = document.getElementById("query-results");
var contextResultsElement = document.getElementById("recieved-data");
var contextResultsElement = document.getElementById("context-results");
queryFormSubmitElement.addEventListener("click", function(event) {
event.preventDefault();
let formData = new FormData(queryFormElement);
@@ -214,10 +216,20 @@
});
socket.on("corpus_analysis", function(message) {
console.log("### corpus_analysis ###");
console.log(message);
queryResultsElement.innerHTML = "";
// Reset related global values
lookup = {"cpos": null, "s": null, "text": null};
matches = null;
tokenElements = null;
if (message === null) {
M.toast({html: "No results for this query!", displayLength: 10000, classes: "red"});
} else {
M.toast({"html": "No results for this query!", "classes": "red"});
return;
}
var matchElement;
var matchTextTitlesElement;
var matchLeftContextElement;
@@ -227,11 +239,13 @@
var token;
var tokenElement;
result = message;
// Set related global values
lookup["cpos"] = message["cpos_lookup"];
lookup["text"] = message["text_lookup"];
matches = message["matches"];
tokenElements = new Set();
queryResultsElement.innerHTML = "";
for (let [index, match] of result['matches'].entries()) {
for (let [index, match] of matches.entries()) {
matchElement = document.createElement("tr");
matchElement.classList.add("match");
matchElement.dataset.index = index;
@@ -241,7 +255,7 @@
matchLeftContextElement = document.createElement("td");
matchLeftContextElement.classList.add("left-context");
for (cpos of match["lc"]) {
token = result["cpos_lookup"][cpos];
token = lookup["cpos"][cpos];
tokenElement = document.createElement("span");
tokenElement.classList.add("token");
tokenElement.dataset.cpos = cpos;
@@ -252,14 +266,14 @@
}
matchLeftContextElement.append(tokenElement);
matchLeftContextElement.append(document.createTextNode(" "));
tokenElements.push(tokenElement);
tokenElements.add(tokenElement);
}
matchElement.append(matchLeftContextElement);
matchHitElement = document.createElement("td");
matchHitElement.classList.add("hit");
textTitles = new Set();
for (cpos of match["hit"]) {
token = result["cpos_lookup"][cpos];
token = lookup["cpos"][cpos];
tokenElement = document.createElement("span");
tokenElement.classList.add("token");
tokenElement.dataset.cpos = cpos;
@@ -270,8 +284,8 @@
}
matchHitElement.append(tokenElement);
matchHitElement.append(document.createTextNode(" "));
tokenElements.push(tokenElement);
textTitles.add(result["text_lookup"][token["text"]]["title"]);
tokenElements.add(tokenElement);
textTitles.add(lookup["text"][token["text"]]["title"]);
}
var moreContextBtn = document.createElement("a");
moreContextBtn.setAttribute("class", "btn-floating btn waves-effect waves-light teal right");
@@ -280,16 +294,14 @@
matchHitElement.append(moreContextBtn);
moreContextBtn.onclick = function() {
contextModal.open();
var cpos = match["hit"];
socket.emit("inspect_match", {"cpos": cpos});
socket.emit("inspect_match", {"cpos": match["hit"]});
};
matchTextTitlesElement.innerText = [...textTitles].join(",");
matchElement.append(matchHitElement);
matchRightContextElement = document.createElement("td");
matchRightContextElement.classList.add("right-context");
for (cpos of match["rc"]) {
token = result["cpos_lookup"][cpos];
token = lookup["cpos"][cpos];
tokenElement = document.createElement("span");
tokenElement.classList.add("token");
tokenElement.dataset.cpos = cpos;
@@ -300,12 +312,12 @@
}
matchRightContextElement.append(tokenElement);
matchRightContextElement.append(document.createTextNode(" "));
tokenElements.push(tokenElement);
tokenElements.add(tokenElement);
}
matchElement.append(matchRightContextElement);
queryResultsElement.append(matchElement);
}
}});
});
function addToolTipToTokenElement(tokenElement, token) {
M.Tooltip.init(tokenElement,
@@ -323,9 +335,9 @@
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"]}
Title: ${lookup["text"][token["text"]]["title"]}<br>
Author: ${lookup["text"][token["text"]]["author"]}<br>
Publishing year: ${lookup["text"][token["text"]]["publishing_year"]}
</td>
</tr>
</table>`,
@@ -337,25 +349,27 @@
socket.on("match_context", function(message) {
console.log("### match_context ###");
console.log(message);
contextResultsElement.innerHTML = "<p>&nbsp;</p>";
document.getElementById("context-modal-loading").classList.add("hide");
document.getElementById("context-modal-ready").classList.remove("hide");
let token;
let tokenElement;
let tokenElements = [];
var sentenceElement;
var token;
var tokenElement;
console.log("Incoming data:", message);
context = message;
document.getElementById("loading-data").classList.add("hide");
document.getElementById("recieved-data").classList.remove("hide");
lookup["cpos"] = {...lookup["cpos"], ...message["cpos_lookup"]};
lookup["s"] = message["context_s_cpos"];
lookup["text"] = {...lookup["text"], ...message["text_lookup"]};
contextResultsElement.innerHTML = "<br>";
for (let [key, value] of Object.entries(context['context_s_cpos'])) {
for (let [key, value] of Object.entries(message['context_s_cpos'])) {
sentenceElement = document.createElement("p");
for (cpos of value) {
token = context["cpos_lookup"][cpos];
token = lookup["cpos"][cpos];
tokenElement = document.createElement("span");
tokenElement.classList.add("token");
if (context["match_cpos_list"].includes(cpos)) {
if (message["match_cpos_list"].includes(cpos)) {
tokenElement.classList.add("bold");
}
tokenElement.dataset.cpos = cpos;
@@ -364,13 +378,12 @@
tokenElement.classList.add("chip");
addToolTipToTokenElement(tokenElement, token);
}
tokenElements.push(tokenElement);
tokenElements.add(tokenElement);
sentenceElement.append(tokenElement);
sentenceElement.append(document.createTextNode(" "));
}
contextResultsElement.append(sentenceElement);
}
});
</script>
{% endblock %}